Reduce Demo1 shadow trees to just 1 <div>

Author: dandclark

demo1/cssModuleElement.js

@@ -7,7 +7,7 @@ class CSSModuleTestElement extends HTMLElement {
         this.shadow.adoptedStyleSheets = [sheet];
 
         this.shadow.innerHTML = 
-            `<div class="outer-container"><div class="text-container">This text should be styled</div></div>`;  
+            `<div class="outer-container text-container">This text should be styled</div>`;
     }
 }
 export {CSSModuleTestElement};

demo1/linkInShadowElement.js

@@ -4,7 +4,7 @@ class LinkTestElement extends HTMLElement {
         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>`;
+            `<link rel="stylesheet" href="styles.css" /><div class="outer-container text-container">This text should be styled</div>`;
     }
 }
 export {LinkTestElement};

demo1/styleInShadowElement.js

@@ -22,7 +22,7 @@ class StyleTestElement extends HTMLElement {
                 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>`;
+            </style><div class="outer-container text-container">This text should be styled</div>`;
     }
 }
 export {StyleTestElement};