From c08cf6ebc27318aff5f67b015a5d54240bdbf4c3 Mon Sep 17 00:00:00 2001
From: Sascha Schulz <sschulz@dh-software.de>
Date: Mo, 19 Feb 2024 12:31:58 +0100
Subject: [PATCH] add web component styles exercise
---
templates/009-web-components/web-component-styles.html | 16 ++++++++++++++++
templates/009-web-components/web-component-styles.js | 24 ++++++++++++++++++++++++
2 files changed, 40 insertions(+), 0 deletions(-)
diff --git a/templates/009-web-components/web-component-styles.html b/templates/009-web-components/web-component-styles.html
new file mode 100644
index 0000000..68d3586
--- /dev/null
+++ b/templates/009-web-components/web-component-styles.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8">
+ <title>Web Component Styles</title>
+ <script defer src="web-component-styles.js"></script>
+ </head>
+ <body>
+ <style>
+ /* Outer Styles */
+ </style>
+ <my-component></my-component>
+ <div class="inner">Global Text with inner class</div>
+ <div class="outer">Global Text with outer class</div>
+ </body>
+</html>
diff --git a/templates/009-web-components/web-component-styles.js b/templates/009-web-components/web-component-styles.js
new file mode 100644
index 0000000..692c9b2
--- /dev/null
+++ b/templates/009-web-components/web-component-styles.js
@@ -0,0 +1,24 @@
+class MyComponent extends HTMLElement {
+ constructor() {
+ super();
+
+ const shadowRoot = this.attachShadow({mode: "open"});
+
+ shadowRoot.innerHTML = `
+ <style>
+ :host {
+ display: block;
+ }
+
+ .inner {
+ /* Inner Styles */
+ }
+ </style>
+
+ <div class="inner">Web Component Text with inner class</div>
+ <div class="outer">Web Component Text with outer class</div>
+ `;
+ }
+}
+
+window.customElements.define("my-component", MyComponent);
--
Gitblit v1.9.3