Merge pull request #198 from chromaui/andrew/ap-4984-create-changes-t…

…o-support-constructed-stylesheets Add second shadow DOM element to shadow DOM test pages
chromaui · Sep 25, 2024 · cf36805 · cf36805
2 parents 9aac01e + 0cedceb
commit cf36805
Show file tree

Hide file tree

Showing 2 changed files with 80 additions and 35 deletions.
diff --git a/test-server/fixtures/constructable-stylesheets/shadow-dom.html b/test-server/fixtures/constructable-stylesheets/shadow-dom.html
@@ -6,37 +6,55 @@ <h1>Constructable Stylesheets in Shadow DOM</h1>
       <h2>This section should have been generated using shadow DOM</h2>
     </div>
     <p>Paragraph outside the shadow DOM.</p>
+    <div id="shadowHost2">
+      <h2>This section should have been generated using shadow DOM</h2>
+    </div>
 
     <script type="text/javascript">
-      const shadowElement = document.getElementById('shadowHost');
-      const shadow = shadowElement.attachShadow({ mode: 'open' });
+      const attachShadowDomElement = (
+        shadowHostId,
+        backgroundColor,
+        headerColor,
+        paragraphColor
+      ) => {
+        const shadowElement = document.getElementById(shadowHostId);
+        const shadow = shadowElement.attachShadow({ mode: 'open' });
+
+        const container = document.createElement('div');
+        shadow.appendChild(container);
 
-      const container = document.createElement('div');
-      shadow.appendChild(container);
+        const subHeading = document.createElement('h2');
+        subHeading.innerHTML = `This section is generated using shadow DOM (I should be ${headerColor})`;
+        container.appendChild(subHeading);
 
-      const subHeading = document.createElement('h2');
-      subHeading.innerHTML = 'This section is generated using shadow DOM (I should be blue)';
-      container.appendChild(subHeading);
+        const paragraph = document.createElement('p');
+        paragraph.innerHTML = `This section is <strong>locally</strong> styled with constructable stylesheets created inside the shadow DOM. I should be <strong>${paragraphColor}</strong> and the section background should be <strong>${backgroundColor}</strong>.`;
+        container.appendChild(paragraph);
 
-      const paragraph = document.createElement('p');
-      paragraph.innerHTML =
-        'This section is <strong>locally</strong> styled with constructable stylesheets created inside the shadow DOM. I should be <strong>green</strong> and the section background should be <strong>cyan</strong>.';
-      container.appendChild(paragraph);
+        const bodyStyleSheet = new CSSStyleSheet();
+        bodyStyleSheet.replaceSync(`
+          div {
+            background: ${backgroundColor};
+            padding: 10px;
+          }            
+        `);
+        const headerStyleSheet = new CSSStyleSheet();
+        headerStyleSheet.replaceSync(`
+          h1, h2 {
+            color: ${headerColor};
+          }
+        `);
+        const paragraphStyleSheet = new CSSStyleSheet();
+        paragraphStyleSheet.replaceSync(`
+          p {
+            color: ${paragraphColor};
+          }
+        `);
+        shadow.adoptedStyleSheets = [bodyStyleSheet, headerStyleSheet, paragraphStyleSheet];
+      };
 
-      const styles = new CSSStyleSheet();
-      styles.replaceSync(`
-        div {
-          background: cyan;
-          padding: 10px;
-        }            
-        h1, h2 {
-          color: blue;
-        }
-        p {
-          color: green;
-        }
-      `);
-      shadow.adoptedStyleSheets = [styles];
+      attachShadowDomElement('shadowHost', 'cyan', 'blue', 'green');
+      attachShadowDomElement('shadowHost2', 'yellow', 'red', 'purple');
     </script>
   </body>
 </html>
diff --git a/test-server/fixtures/constructable-stylesheets/web-components-shadow-dom.html b/test-server/fixtures/constructable-stylesheets/web-components-shadow-dom.html
@@ -2,40 +2,67 @@
 <html>
   <body>
     <h1>Constructable Stylesheets in Web Components in Shadow DOM</h1>
-    <styled-component></styled-component>
+    <styled-component
+      background-color="cyan"
+      header-color="blue"
+      paragraph-color="green"
+    ></styled-component>
     <p>Paragraph outside the Web Component.</p>
+    <styled-component
+      background-color="yellow"
+      header-color="red"
+      paragraph-color="purple"
+    ></styled-component>
 
     <script type="text/javascript">
       class StyledComponent extends HTMLElement {
+        constructor() {
+          super();
+        }
+
+        static get observedAttributes() {
+          return ['background-color', 'header-color', 'paragraph-color'];
+        }
+
+        attributeChangedCallback(property, oldValue, newValue) {
+          if (oldValue === newValue) return;
+          this[property] = newValue;
+        }
+
         connectedCallback() {
           const shadow = this.attachShadow({ mode: 'open' });
 
           const container = document.createElement('div');
           shadow.appendChild(container);
 
           const h2 = document.createElement('h2');
-          h2.innerHTML = 'This section is generated using a Web Component (I should be blue)';
+          h2.innerHTML = `This section is generated using a Web Component (I should be ${this['header-color']})`;
           container.appendChild(h2);
 
           const p = document.createElement('p');
-          p.innerHTML =
-            'This section is <strong>locally</strong> styled with constructable stylesheets created inside the Web Component using shadow DOM. I should be <strong>green</strong> and the section background should be <strong>cyan</strong>.';
+          p.innerHTML = `This section is <strong>locally</strong> styled with constructable stylesheets created inside the Web Component using shadow DOM. I should be <strong>${this['paragraph-color']}</strong> and the section background should be <strong>${this['background-color']}</strong>.`;
           container.appendChild(p);
 
-          const stylesheet = new CSSStyleSheet();
-          stylesheet.replaceSync(`
+          const bodyStyleSheet = new CSSStyleSheet();
+          bodyStyleSheet.replaceSync(`
             div {
-              background: cyan;
+              background: ${this['background-color']};
               padding: 10px;
             }            
+          `);
+          const headerStylesheet = new CSSStyleSheet();
+          headerStylesheet.replaceSync(`
             h1, h2 {
-              color: blue;
+              color: ${this['header-color']};
             }
+          `);
+          const paragraphStylesheet = new CSSStyleSheet();
+          paragraphStylesheet.replaceSync(`
             p {
-              color: green;
+              color: ${this['paragraph-color']};
             }
           `);
-          shadow.adoptedStyleSheets = [stylesheet];
+          shadow.adoptedStyleSheets = [bodyStyleSheet, headerStylesheet, paragraphStylesheet];
         }
       }
       customElements.define('styled-component', StyledComponent);