Add update handler for tone attribute

Shopify · Jan 3, 2024 · a0caee3 · a0caee3
1 parent 8e1fad4
commit a0caee3
Showing 1 changed file with 15 additions and 1 deletion.
diff --git a/examples/minimal-iframes/app/index.html b/examples/minimal-iframes/app/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <body>
     <div id="root"></div>
@@ -7,6 +7,10 @@
 
     <script type="module">
       class UIBanner extends HTMLElement {
+        static get observedAttributes() {
+          return ['tone'];
+        }
+
         connectedCallback() {
           // We will allow you to pass a `tone` attribute to the element, which
           // styles the banner according to our design system. We’ll see how to
@@ -33,6 +37,16 @@
             <div class="Banner Banner--${tone}"><slot></slot></div>
           `;
         }
+
+        attributeChangedCallback(name, oldValue, newValue) {
+          if (name === 'tone') {
+            const banner = this.shadowRoot?.querySelector('.Banner');
+            if (banner == null) return;
+
+            banner.classList.remove(`Banner--${oldValue ?? 'neutral'}`);
+            banner.classList.add(`Banner--${newValue ?? 'neutral'}`);
+          }
+        }
       }
 
       customElements.define('ui-banner', UIBanner);