From a0caee3fe3e87a854c9a6e9d24b74bb422ea9792 Mon Sep 17 00:00:00 2001
From: Chris Sauve <chris.sauve@shopify.com>
Date: Wed, 3 Jan 2024 17:51:01 -0500
Subject: [PATCH] Add update handler for tone attribute

---
 examples/minimal-iframes/app/index.html | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)
diff --git a/examples/minimal-iframes/app/index.html b/examples/minimal-iframes/app/index.html
index 4e4781e3..193b6146 100644
--- 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);
