:bug: Don't use shadow dom so components can be styled in an app.

1 files 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();
       }