From b6fb7195307e9c5e3a085080e2ee63acf19e3123 Mon Sep 17 00:00:00 2001
From: Hayleigh Thompson <me@hayleigh.dev>
Date: Thu, 20 Jul 2023 08:55:18 +0100
Subject: :bug: Don't use shadow dom so components can be styled in an app.

---
 src/lustre.ffi.mjs | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/lustre.ffi.mjs b/src/lustre.ffi.mjs
index 25d82ae..39ba9ec 100644
--- a/src/lustre.ffi.mjs
+++ b/src/lustre.ffi.mjs
@@ -145,14 +145,16 @@ export const setup_component = (
   customElements.define(
     name,
     class extends HTMLElement {
+      static get observedAttributes() {
+        return on_attribute_change.entries().map(([name, _]) => name);
+      }
+
       #container = document.createElement("div");
       #app = null;
       #dispatch = null;
 
       constructor() {
         super();
-        this.attachShadow({ mode: "open" });
-        this.shadowRoot.appendChild(this.#container);
 
         this.#app = new App(init, update, render);
         const dispatch = this.#app.start(this.#container);
@@ -186,6 +188,16 @@ export const setup_component = (
         });
       }
 
+      connectedCallback() {
+        this.appendChild(this.#container);
+      }
+
+      attributeChangedCallback(name, prev, next) {
+        if (prev !== next) {
+          this[name] = next;
+        }
+      }
+
       disconnectedCallback() {
         this.#app.destroy();
       }
-- 
cgit v1.2.3