thunderous 0.2.2 → 0.3.0

package/README.md

@@ -91,23 +91,55 @@ You can always define the internals the same as you usually would, and if for so
 
 <!-- prettier-ignore-start -->
 ```ts
-const MyElement = customElement(({ internals, elementRef, root }) => {
-  internals.ariaRequired = 'true';
-  const childLink = elementRef.querySelector('a[href]'); // light DOM
-  const innerLink = root.querySelector('a[href]'); // shadow DOM
+const MyElement = customElement((params) => {
+  const {
+    internals,
+    elementRef,
+    root,
+    connectedCallback,
+  } = params;
+
+  internals.setFormValue('hello world');
+  connectedCallback(() => {
+    const childLink = elementRef.querySelector('a[href]'); // light DOM
+    const innerLink = root.querySelector('a[href]'); // shadow DOM
+    /* ... */
+  });
   /* ... */
 }, { formAssociated: true });
 ```
 <!-- prettier-ignore-end -->
 
+If you need to pass certain options to the `attachShadow()` call, you can do so by passing `shadowRootOptions`.
+
+<!-- prettier-ignore-start -->
+```ts
+const MyElement = customElement(() => {
+  /* ... */
+}, { shadowRootOptions: { delegatesFocus: true } });
+```
+<!-- prettier-ignore-end -->
+
+To opt out of using shadow DOM at all, pass `false` to `attachShadow`. This will change `root` above to reference the element itself, and stylesheets will apply to the global document rather than being encapsulated within the component.
+
+<!-- prettier-ignore-start -->
+```ts
+const MyElement = customElement(() => {
+  /* ... */
+}, { attachShadow: false });
+```
+<!-- prettier-ignore-end -->
+
 #### Adopted Style Sheets
 
 This one diverges from native slightly, since the native approach is a bit manual. For convenience, you can use the `adoptStyleSheet()` function.
 
-> If you prefer the manual approach, `root.adoptedStyleSheets = []`, you can always do that with the `root` property listed above.
+> If you prefer the manual approach, `root.adoptedStyleSheets = []`, you can always do that with the `root` property above, or the global `document`.
 
 The `css` tagged template function will construct a `CSSStyleSheet` object that can be adopted by documents and shadow roots.
 
+> When `attachShadow` is set to `false`, `adoptStyleSheet()` will use the global document to adopt the styles.
+
 <!-- prettier-ignore-start -->
 ```ts
 import { customElement, css } from 'thunderous';
@@ -175,7 +207,7 @@ By default, each element is observed with a `MutationObserver` watching all attr
 ```ts
 const MyElement = customElement(({ attrSignals }) => {
   const [heading, setHeading] = attrSignals['my-heading'];
-  // setHeading() will also update the attribute in the DOM.
+  // setHeading() will also update the attribute in the HTML.
   return html`<h2>${heading}</h2>`;
 });
 ```
@@ -200,6 +232,53 @@ Usage:
 
 > NOTICE: Since `attrSignals` is a `Proxy` object, _any_ property will return a signal and auto-bind it to the attribute it corresponds with.
 
+##### Property Signals
+
+In addition to attributes, there are also properties. Though often conflated, there is an important distinction: _attributes_ are strings defined in HTML, and _properties_ can be any type of data, strictly in JavaScript and completely invisible to HTML.
+
+Modern templating solutions often allow developers to assign properties via HTML attribute _syntax_, even though they are not actually attributes. While this distinction may seem trivial for those working with modern frameworks, it becomes much more relevant when defining custom elements that may be used in plain HTML.
+
+Thunderous supports properties for cases where strings are not sufficient. These are also reflected as signals _within_ the component, but the _consumer_ of the component will not directly interact with this signal. `myElement.count = 1` will update the internal signal.
+
+<!-- prettier-ignore-start -->
+```ts
+const MyElement = customElement(({ propSignals }) => {
+  const [count, setCount] = propSignals['prop'];
+  // setCount() will also update the property in the DOM
+  return html`<output>${count}</output>`;
+});
+```
+<!-- prettier-ignore-end -->
+
+There is also a way to sync attributes with properties, though it should be used deliberately, with caution. Since it requires some coercion to occur, it may introduce some performance overhead. It's best not to use this to parse JSON strings, for example.
+
+To use this feature, pass `attributesAsProperties` in the options. It accepts an array of `[propertyName, coerceFn]` pairs. For primitive types, you can use their constructors for coercion, like `['count', Number]`.
+
+<!-- prettier-ignore-start -->
+```ts
+const MyElement = customElement(({ propSignals }) => {
+  const [count, setCount] = propSignals['prop'];
+  // setCount() will also update the property in the DOM
+  return html`<output>${count}</output>`;
+}, { attributesAsProperties: [['count', Number]] });
+```
+<!-- prettier-ignore-end -->
+
+With the above snippet, `count` may be controlled by setting the attribute, like so:
+
+```html
+<my-element count="1"></my-element>
+```
+
+...and the attribute will reflect changes made to the property as well:
+
+```ts
+const myElement = document.querySelector('my-element');
+myElement.count = 1;
+```
+
+In both cases, the `count()` signal will be updated.
+
 ##### Derived Signals
 
 If you want to calculate a value based on another signal's value, you should use the `derived()` function. This signal will trigger its subscribers each time the signals inside change.
@@ -278,9 +357,14 @@ const MyElement = customElement(({ customCallback }) => {
   `;
 });
 ```
-<!-- prettier-ignore-end -->
 
-> NOTICE: This uses the native HTML inline event-binding syntax. There is no special syntax for `on` attributes, because it simply renders a reference to `this.getRootNode().host` and extracts the callback from there.
+> NOTICE: This uses the native HTML inline event-binding syntax. There is no special syntax for `on` attributes, because it simply renders the reference to the host element.
+>
+> You will see something like this when you inspect the element in the browser:
+> ```html
+> <my-element onclick="this.getRootNode().host.__customCallbackFns.get('d7121610-e89d-4629-ab00-d4e22644f16b')(event)">
+> ```
+<!-- prettier-ignore-end -->
 
 ### Defining Custom Elements
 

package/dist/index.cjs

@@ -182,6 +182,11 @@ var html = (strings, ...values) => {
               child.setAttribute(attr.name, newText);
             });
           } else if (callbackBindingRegex.test(attr.value)) {
+            const getRootNode = child.getRootNode.bind(child);
+            child.getRootNode = () => {
+              const rootNode = getRootNode();
+              return rootNode instanceof ShadowRoot ? rootNode : fragment;
+            };
             const uniqueKey = attr.value.replace(/\{\{callback:(.+)\}\}/, "$1");
             child.setAttribute(attr.name, `this.getRootNode().host.__customCallbackFns.get('${uniqueKey}')(event)`);
           }
@@ -234,12 +239,38 @@ var css = (strings, ...values) => {
 // src/custom-element.ts
 var DEFAULT_RENDER_OPTIONS = {
   formAssociated: false,
-  observedAttributes: []
+  observedAttributes: [],
+  attributesAsProperties: [],
+  attachShadow: true,
+  shadowRootOptions: {
+    mode: "closed"
+  }
 };
+var getPropName = (attrName) => attrName.replace(/^([A-Z]+)/, (_, letter) => letter.toLowerCase()).replace(/(-|_| )([a-zA-Z])/g, (_, letter) => letter.toUpperCase());
 var customElement = (render, options) => {
-  const { formAssociated, observedAttributes } = { ...DEFAULT_RENDER_OPTIONS, ...options };
+  const {
+    formAssociated,
+    observedAttributes: _observedAttributes,
+    attributesAsProperties,
+    attachShadow,
+    shadowRootOptions: _shadowRootOptions
+  } = { ...DEFAULT_RENDER_OPTIONS, ...options };
+  const shadowRootOptions = { ...DEFAULT_RENDER_OPTIONS.shadowRootOptions, ..._shadowRootOptions };
+  const observedAttributesSet = new Set(_observedAttributes);
+  const attributesAsPropertiesMap = /* @__PURE__ */ new Map();
+  for (const [attrName, coerce] of attributesAsProperties) {
+    observedAttributesSet.add(attrName);
+    attributesAsPropertiesMap.set(attrName, {
+      prop: getPropName(attrName),
+      coerce,
+      value: null
+    });
+  }
+  const observedAttributes = Array.from(observedAttributesSet);
   class CustomElement extends HTMLElement {
+    #attributesAsPropertiesMap = new Map(attributesAsPropertiesMap);
     #attrSignals = {};
+    #propSignals = {};
     #attributeChangedFns = /* @__PURE__ */ new Set();
     #connectedFns = /* @__PURE__ */ new Set();
     #disconnectedFns = /* @__PURE__ */ new Set();
@@ -248,26 +279,28 @@ var customElement = (render, options) => {
     #formResetCallbackFns = /* @__PURE__ */ new Set();
     #formStateRestoreCallbackFns = /* @__PURE__ */ new Set();
     __customCallbackFns = /* @__PURE__ */ new Map();
-    #shadowRoot = this.attachShadow({ mode: "closed" });
+    #shadowRoot = attachShadow ? this.attachShadow(shadowRootOptions) : null;
     #internals = this.attachInternals();
-    #observer = observedAttributes.length > 0 ? null : new MutationObserver((mutations) => {
+    #observer = (options == null ? void 0 : options.observedAttributes) !== void 0 ? null : new MutationObserver((mutations) => {
       for (const mutation of mutations) {
         const attrName = mutation.attributeName;
         if (mutation.type !== "attributes" || attrName === null) continue;
-        const [value, setValue] = this.#attrSignals[attrName];
-        const _oldValue = value();
+        if (!(attrName in this.#attrSignals)) this.#attrSignals[attrName] = createSignal(null);
+        const [getter, setter] = this.#attrSignals[attrName];
+        const _oldValue = getter();
         const oldValue = _oldValue === null ? null : _oldValue;
         const newValue = this.getAttribute(attrName);
-        setValue(newValue);
+        setter(newValue);
         for (const fn of this.#attributeChangedFns) {
           fn(attrName, oldValue, newValue);
         }
       }
     });
     #render() {
+      const root = this.#shadowRoot ?? this;
       const fragment = render({
         elementRef: this,
-        root: this.#shadowRoot,
+        root,
         internals: this.#internals,
         attributeChangedCallback: (fn) => this.#attributeChangedFns.add(fn),
         connectedCallback: (fn) => this.#connectedFns.add(fn),
@@ -296,10 +329,28 @@ var customElement = (render, options) => {
             }
           }
         ),
+        propSignals: new Proxy(
+          {},
+          {
+            get: (_, prop) => {
+              if (!(prop in this.#propSignals)) this.#propSignals[prop] = createSignal(null);
+              const [getter, _setter] = this.#propSignals[prop];
+              const setter = (newValue) => {
+                this[prop] = newValue;
+                _setter(newValue);
+              };
+              return [getter, setter];
+            },
+            set: () => {
+              console.error("Signals must be assigned via setters.");
+              return false;
+            }
+          }
+        ),
         refs: new Proxy(
           {},
           {
-            get: (_, prop) => this.#shadowRoot.querySelector(`[ref=${prop}]`),
+            get: (_, prop) => root.querySelector(`[ref=${prop}]`),
             set: () => {
               console.error("Refs are readonly and cannot be assigned.");
               return false;
@@ -307,16 +358,31 @@ var customElement = (render, options) => {
           }
         ),
         adoptStyleSheet: (stylesheet) => {
+          if (!attachShadow) {
+            console.warn(
+              "Styles are only encapsulated when using shadow DOM. The stylesheet will be applied to the global document instead."
+            );
+          }
           if (isCSSStyleSheet(stylesheet)) {
+            if (this.#shadowRoot === null) {
+              for (const rule of stylesheet.cssRules) {
+                if (rule instanceof CSSStyleRule && rule.selectorText.includes(":host")) {
+                  console.error("Styles with :host are not supported when not using shadow DOM.");
+                }
+              }
+              document.adoptedStyleSheets.push(stylesheet);
+              return;
+            }
             this.#shadowRoot.adoptedStyleSheets.push(stylesheet);
           } else {
             requestAnimationFrame(() => {
-              this.#shadowRoot.appendChild(stylesheet);
+              root.appendChild(stylesheet);
             });
           }
         }
       });
-      setInnerHTML(this.#shadowRoot, fragment);
+      fragment.host = this;
+      setInnerHTML(root, fragment);
     }
     static get formAssociated() {
       return formAssociated;
@@ -326,6 +392,34 @@ var customElement = (render, options) => {
     }
     constructor() {
       super();
+      for (const [attrName, attr] of this.#attributesAsPropertiesMap) {
+        this.#attrSignals[attrName] = createSignal(null);
+        Object.defineProperty(this, attr.prop, {
+          get: () => {
+            if (!(attrName in this.#attrSignals)) this.#attrSignals[attrName] = createSignal(null);
+            const [getter] = this.#attrSignals[attrName];
+            const raw = getter();
+            const rawOnly = raw !== null && attr.value === null;
+            const value = rawOnly ? attr.coerce(raw) : attr.value;
+            return value === null ? null : value;
+          },
+          set: (newValue) => {
+            const oldValue = attr.value;
+            attr.value = newValue;
+            if (!(attrName in this.#attrSignals)) this.#attrSignals[attrName] = createSignal(null);
+            const [, attrSetter] = this.#attrSignals[attrName];
+            const [, propSetter] = this.#propSignals[attrName];
+            const attrValue = newValue === null ? null : String(newValue);
+            if (String(oldValue) === attrValue) return;
+            attrSetter(attrValue);
+            propSetter(newValue);
+            if (attrValue === null) this.removeAttribute(attrName);
+            else this.setAttribute(attrName, attrValue);
+          },
+          configurable: true,
+          enumerable: true
+        });
+      }
       for (const attr of this.attributes) {
         this.#attrSignals[attr.name] = createSignal(attr.value);
       }
@@ -348,8 +442,12 @@ var customElement = (render, options) => {
       }
     }
     attributeChangedCallback(name, oldValue, newValue) {
-      const [, setValue] = this.#attrSignals[name];
-      setValue(newValue);
+      const [, attrSetter] = this.#attrSignals[name] ?? [];
+      attrSetter == null ? void 0 : attrSetter(newValue);
+      const prop = this.#attributesAsPropertiesMap.get(name);
+      if (prop !== void 0) {
+        this[prop.prop] = newValue === null ? null : prop.coerce(newValue);
+      }
       for (const fn of this.#attributeChangedFns) {
         fn(name, oldValue, newValue);
       }

package/dist/index.d.cts

@@ -1,3 +1,8 @@
+declare global {
+    interface Element {
+        __findHost: () => Element;
+    }
+}
 declare const html: (strings: TemplateStringsArray, ...values: unknown[]) => DocumentFragment;
 type Styles = CSSStyleSheet | HTMLStyleElement;
 declare const css: (strings: TemplateStringsArray, ...values: unknown[]) => Styles;
@@ -13,6 +18,11 @@ declare const createSignal: <T = undefined>(initVal?: T, options?: SignalOptions
 declare const derived: <T>(fn: () => T) => SignalGetter<T>;
 declare const createEffect: (fn: () => void) => void;
 
+declare global {
+    interface DocumentFragment {
+        host: HTMLElement;
+    }
+}
 type ElementResult = {
     define: (tagname: `${string}-${string}`) => ElementResult;
     register: (registry: Registry) => ElementResult;
@@ -21,7 +31,7 @@ type ElementResult = {
 type AttributeChangedCallback = (name: string, oldValue: string | null, newValue: string | null) => void;
 type RenderProps = {
     elementRef: HTMLElement;
-    root: ShadowRoot;
+    root: ShadowRoot | HTMLElement;
     internals: ElementInternals;
     attributeChangedCallback: (fn: AttributeChangedCallback) => void;
     connectedCallback: (fn: () => void) => void;
@@ -32,12 +42,17 @@ type RenderProps = {
     formStateRestoreCallback: (fn: () => void) => void;
     customCallback: (fn: () => void) => `{{callback:${string}}}`;
     attrSignals: Record<string, Signal<string | null>>;
+    propSignals: Record<string, Signal<unknown>>;
     refs: Record<string, HTMLElement | null>;
     adoptStyleSheet: (stylesheet: Styles) => void;
 };
+type Coerce<T = unknown> = (value: string) => T;
 type RenderOptions = {
     formAssociated: boolean;
     observedAttributes: string[];
+    attributesAsProperties: [string, Coerce][];
+    attachShadow: boolean;
+    shadowRootOptions: ShadowRootInit;
 };
 type RenderFunction = (props: RenderProps) => DocumentFragment;
 declare const customElement: (render: RenderFunction, options?: Partial<RenderOptions>) => ElementResult;

package/dist/index.d.ts

@@ -1,3 +1,8 @@
+declare global {
+    interface Element {
+        __findHost: () => Element;
+    }
+}
 declare const html: (strings: TemplateStringsArray, ...values: unknown[]) => DocumentFragment;
 type Styles = CSSStyleSheet | HTMLStyleElement;
 declare const css: (strings: TemplateStringsArray, ...values: unknown[]) => Styles;
@@ -13,6 +18,11 @@ declare const createSignal: <T = undefined>(initVal?: T, options?: SignalOptions
 declare const derived: <T>(fn: () => T) => SignalGetter<T>;
 declare const createEffect: (fn: () => void) => void;
 
+declare global {
+    interface DocumentFragment {
+        host: HTMLElement;
+    }
+}
 type ElementResult = {
     define: (tagname: `${string}-${string}`) => ElementResult;
     register: (registry: Registry) => ElementResult;
@@ -21,7 +31,7 @@ type ElementResult = {
 type AttributeChangedCallback = (name: string, oldValue: string | null, newValue: string | null) => void;
 type RenderProps = {
     elementRef: HTMLElement;
-    root: ShadowRoot;
+    root: ShadowRoot | HTMLElement;
     internals: ElementInternals;
     attributeChangedCallback: (fn: AttributeChangedCallback) => void;
     connectedCallback: (fn: () => void) => void;
@@ -32,12 +42,17 @@ type RenderProps = {
     formStateRestoreCallback: (fn: () => void) => void;
     customCallback: (fn: () => void) => `{{callback:${string}}}`;
     attrSignals: Record<string, Signal<string | null>>;
+    propSignals: Record<string, Signal<unknown>>;
     refs: Record<string, HTMLElement | null>;
     adoptStyleSheet: (stylesheet: Styles) => void;
 };
+type Coerce<T = unknown> = (value: string) => T;
 type RenderOptions = {
     formAssociated: boolean;
     observedAttributes: string[];
+    attributesAsProperties: [string, Coerce][];
+    attachShadow: boolean;
+    shadowRootOptions: ShadowRootInit;
 };
 type RenderFunction = (props: RenderProps) => DocumentFragment;
 declare const customElement: (render: RenderFunction, options?: Partial<RenderOptions>) => ElementResult;

package/dist/index.js

@@ -151,6 +151,11 @@ var html = (strings, ...values) => {
               child.setAttribute(attr.name, newText);
             });
           } else if (callbackBindingRegex.test(attr.value)) {
+            const getRootNode = child.getRootNode.bind(child);
+            child.getRootNode = () => {
+              const rootNode = getRootNode();
+              return rootNode instanceof ShadowRoot ? rootNode : fragment;
+            };
             const uniqueKey = attr.value.replace(/\{\{callback:(.+)\}\}/, "$1");
             child.setAttribute(attr.name, `this.getRootNode().host.__customCallbackFns.get('${uniqueKey}')(event)`);
           }
@@ -203,12 +208,38 @@ var css = (strings, ...values) => {
 // src/custom-element.ts
 var DEFAULT_RENDER_OPTIONS = {
   formAssociated: false,
-  observedAttributes: []
+  observedAttributes: [],
+  attributesAsProperties: [],
+  attachShadow: true,
+  shadowRootOptions: {
+    mode: "closed"
+  }
 };
+var getPropName = (attrName) => attrName.replace(/^([A-Z]+)/, (_, letter) => letter.toLowerCase()).replace(/(-|_| )([a-zA-Z])/g, (_, letter) => letter.toUpperCase());
 var customElement = (render, options) => {
-  const { formAssociated, observedAttributes } = { ...DEFAULT_RENDER_OPTIONS, ...options };
+  const {
+    formAssociated,
+    observedAttributes: _observedAttributes,
+    attributesAsProperties,
+    attachShadow,
+    shadowRootOptions: _shadowRootOptions
+  } = { ...DEFAULT_RENDER_OPTIONS, ...options };
+  const shadowRootOptions = { ...DEFAULT_RENDER_OPTIONS.shadowRootOptions, ..._shadowRootOptions };
+  const observedAttributesSet = new Set(_observedAttributes);
+  const attributesAsPropertiesMap = /* @__PURE__ */ new Map();
+  for (const [attrName, coerce] of attributesAsProperties) {
+    observedAttributesSet.add(attrName);
+    attributesAsPropertiesMap.set(attrName, {
+      prop: getPropName(attrName),
+      coerce,
+      value: null
+    });
+  }
+  const observedAttributes = Array.from(observedAttributesSet);
   class CustomElement extends HTMLElement {
+    #attributesAsPropertiesMap = new Map(attributesAsPropertiesMap);
     #attrSignals = {};
+    #propSignals = {};
     #attributeChangedFns = /* @__PURE__ */ new Set();
     #connectedFns = /* @__PURE__ */ new Set();
     #disconnectedFns = /* @__PURE__ */ new Set();
@@ -217,26 +248,28 @@ var customElement = (render, options) => {
     #formResetCallbackFns = /* @__PURE__ */ new Set();
     #formStateRestoreCallbackFns = /* @__PURE__ */ new Set();
     __customCallbackFns = /* @__PURE__ */ new Map();
-    #shadowRoot = this.attachShadow({ mode: "closed" });
+    #shadowRoot = attachShadow ? this.attachShadow(shadowRootOptions) : null;
     #internals = this.attachInternals();
-    #observer = observedAttributes.length > 0 ? null : new MutationObserver((mutations) => {
+    #observer = (options == null ? void 0 : options.observedAttributes) !== void 0 ? null : new MutationObserver((mutations) => {
       for (const mutation of mutations) {
         const attrName = mutation.attributeName;
         if (mutation.type !== "attributes" || attrName === null) continue;
-        const [value, setValue] = this.#attrSignals[attrName];
-        const _oldValue = value();
+        if (!(attrName in this.#attrSignals)) this.#attrSignals[attrName] = createSignal(null);
+        const [getter, setter] = this.#attrSignals[attrName];
+        const _oldValue = getter();
         const oldValue = _oldValue === null ? null : _oldValue;
         const newValue = this.getAttribute(attrName);
-        setValue(newValue);
+        setter(newValue);
         for (const fn of this.#attributeChangedFns) {
           fn(attrName, oldValue, newValue);
         }
       }
     });
     #render() {
+      const root = this.#shadowRoot ?? this;
       const fragment = render({
         elementRef: this,
-        root: this.#shadowRoot,
+        root,
         internals: this.#internals,
         attributeChangedCallback: (fn) => this.#attributeChangedFns.add(fn),
         connectedCallback: (fn) => this.#connectedFns.add(fn),
@@ -265,10 +298,28 @@ var customElement = (render, options) => {
             }
           }
         ),
+        propSignals: new Proxy(
+          {},
+          {
+            get: (_, prop) => {
+              if (!(prop in this.#propSignals)) this.#propSignals[prop] = createSignal(null);
+              const [getter, _setter] = this.#propSignals[prop];
+              const setter = (newValue) => {
+                this[prop] = newValue;
+                _setter(newValue);
+              };
+              return [getter, setter];
+            },
+            set: () => {
+              console.error("Signals must be assigned via setters.");
+              return false;
+            }
+          }
+        ),
         refs: new Proxy(
           {},
           {
-            get: (_, prop) => this.#shadowRoot.querySelector(`[ref=${prop}]`),
+            get: (_, prop) => root.querySelector(`[ref=${prop}]`),
             set: () => {
               console.error("Refs are readonly and cannot be assigned.");
               return false;
@@ -276,16 +327,31 @@ var customElement = (render, options) => {
           }
         ),
         adoptStyleSheet: (stylesheet) => {
+          if (!attachShadow) {
+            console.warn(
+              "Styles are only encapsulated when using shadow DOM. The stylesheet will be applied to the global document instead."
+            );
+          }
           if (isCSSStyleSheet(stylesheet)) {
+            if (this.#shadowRoot === null) {
+              for (const rule of stylesheet.cssRules) {
+                if (rule instanceof CSSStyleRule && rule.selectorText.includes(":host")) {
+                  console.error("Styles with :host are not supported when not using shadow DOM.");
+                }
+              }
+              document.adoptedStyleSheets.push(stylesheet);
+              return;
+            }
             this.#shadowRoot.adoptedStyleSheets.push(stylesheet);
           } else {
             requestAnimationFrame(() => {
-              this.#shadowRoot.appendChild(stylesheet);
+              root.appendChild(stylesheet);
             });
           }
         }
       });
-      setInnerHTML(this.#shadowRoot, fragment);
+      fragment.host = this;
+      setInnerHTML(root, fragment);
     }
     static get formAssociated() {
       return formAssociated;
@@ -295,6 +361,34 @@ var customElement = (render, options) => {
     }
     constructor() {
       super();
+      for (const [attrName, attr] of this.#attributesAsPropertiesMap) {
+        this.#attrSignals[attrName] = createSignal(null);
+        Object.defineProperty(this, attr.prop, {
+          get: () => {
+            if (!(attrName in this.#attrSignals)) this.#attrSignals[attrName] = createSignal(null);
+            const [getter] = this.#attrSignals[attrName];
+            const raw = getter();
+            const rawOnly = raw !== null && attr.value === null;
+            const value = rawOnly ? attr.coerce(raw) : attr.value;
+            return value === null ? null : value;
+          },
+          set: (newValue) => {
+            const oldValue = attr.value;
+            attr.value = newValue;
+            if (!(attrName in this.#attrSignals)) this.#attrSignals[attrName] = createSignal(null);
+            const [, attrSetter] = this.#attrSignals[attrName];
+            const [, propSetter] = this.#propSignals[attrName];
+            const attrValue = newValue === null ? null : String(newValue);
+            if (String(oldValue) === attrValue) return;
+            attrSetter(attrValue);
+            propSetter(newValue);
+            if (attrValue === null) this.removeAttribute(attrName);
+            else this.setAttribute(attrName, attrValue);
+          },
+          configurable: true,
+          enumerable: true
+        });
+      }
       for (const attr of this.attributes) {
         this.#attrSignals[attr.name] = createSignal(attr.value);
       }
@@ -317,8 +411,12 @@ var customElement = (render, options) => {
       }
     }
     attributeChangedCallback(name, oldValue, newValue) {
-      const [, setValue] = this.#attrSignals[name];
-      setValue(newValue);
+      const [, attrSetter] = this.#attrSignals[name] ?? [];
+      attrSetter == null ? void 0 : attrSetter(newValue);
+      const prop = this.#attributesAsPropertiesMap.get(name);
+      if (prop !== void 0) {
+        this[prop.prop] = newValue === null ? null : prop.coerce(newValue);
+      }
       for (const fn of this.#attributeChangedFns) {
         fn(name, oldValue, newValue);
       }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "thunderous",
-	"version": "0.2.2",
+	"version": "0.3.0",
 	"description": "",
 	"type": "module",
 	"main": "./dist/index.cjs",