Add demo for <link>/<style> in shadow vs CSS module

Author: dandclark

demo4/cssModuleElement.js

@@ -0,0 +1,13 @@
+import sheet from "./styles.css";
+
+class CSSModuleTestElement extends HTMLElement {
+    constructor() {
+        super();
+        this.shadow = this.attachShadow({mode: "closed"});
+        this.shadow.adoptedStyleSheets = [sheet];
+
+        this.shadow.innerHTML = 
+            `<div class="outer-container"><div class="text-container">This text should be styled</div></div>`;  
+    }
+}
+export {CSSModuleTestElement};

demo4/index.html

@@ -0,0 +1,7 @@
+<h2>Demo 4: Overhead of &lt;link&gt; elements for styles in shadow root</h2>
+<br>
+<ul>
+    <li><a href="./noModule.html">With &lt;link rel="stylesheet"&gt; in shadow root</a></li>
+    <li><a href="./module.html">With CSS Module</a> (no browser support yet...)</li>
+</ul>
+<a href="../">[Back to main page]</a>

demo4/linkInShadowElement.js

@@ -0,0 +1,10 @@
+class LinkTestElement extends HTMLElement {
+    constructor() {
+        super();
+        this.shadow = this.attachShadow({mode: "closed"});
+
+        this.shadow.innerHTML =
+            `<link rel="stylesheet" href="styles.css" /><div class="outer-container"><div class="text-container">This text should be styled</div></div>`;
+    }
+}
+export {LinkTestElement};

demo4/module.html

@@ -0,0 +1,28 @@
+class StyleTestElement extends HTMLElement {
+    constructor() {
+        super();
+        this.shadow = this.attachShadow({mode: "closed"});
+
+        this.shadow.innerHTML =
+            `<style>
+            .outer-container {
+                display:inline-block;
+                margin: 0.2em;
+                border: 2px solid red;
+            }
+            
+            .text-container {
+                padding-right: 0.3em;
+                font-size: 2em;
+                font-style: italic;
+                font-family: 'Impact';
+                background: linear-gradient(to right, orange , yellow, green, cyan, blue, violet);
+                background-clip: text;
+                -webkit-background-clip: text;
+                text-fill-color: transparent;
+                -webkit-text-fill-color: transparent;
+            }
+            </style><div class="outer-container"><div class="text-container">This text should be styled</div></div>`;
+    }
+}
+export {StyleTestElement};

demo4/noModuleLink.html

@@ -0,0 +1,17 @@
+.outer-container {
+    display:inline-block;
+    margin: 0.2em;
+    border: 2px solid red;
+}
+
+.text-container {
+    padding-right: 0.3em;
+    font-size: 2em;
+    font-style: italic;
+    font-family: 'Impact';
+    background: linear-gradient(to right, orange , yellow, green, cyan, blue, violet);
+    background-clip: text;
+    -webkit-background-clip: text;
+    text-fill-color: transparent;
+    -webkit-text-fill-color: transparent;
+}