thunderous 0.2.3 → 0.3.1

package/README.md

@@ -8,6 +8,7 @@ Each component renders only once, then binds signals to DOM nodes for direct upd
 
 - [Installation](#installation)
 - [Usage](#usage)
+- [Documentation](#documentation)
 - [Development](#development)
 - [License](#license)
 
@@ -48,273 +49,9 @@ MyElement.define('my-element');
 ```
 <!-- prettier-ignore-end -->
 
-### The Native Features
+## Documentation
 
-Everything the native class definition can do, this function can do too. You'll find that these things are not far removed from the native approach, so they ought to be familiar.
-
-#### Lifecycle Methods
-
-Any lifecycle method you may need can be accessed from the params of your render function. The only difference is that these are callback registrations, so the same callback you would normally write is just passed in instead.
-
-<!-- prettier-ignore-start -->
-```ts
-const MyElement = customElement((params) => {
-  const {
-    adoptedCallback,
-    connectedCallback,
-    disconnectedCallback,
-    attributeChangedCallback,
-  } = params;
-  /* ... */
-});
-```
-<!-- prettier-ignore-end -->
-
-If you need to support forms, pass an options object as the second argument to `customElement`.
-
-<!-- prettier-ignore-start -->
-```ts
-const MyElement = customElement((params) => {
-  const {
-    formDisabledCallback,
-    formResetCallback,
-    formStateRestoreCallback,
-  } = params;
-  /* ... */
-}, { formAssociated: true });
-```
-<!-- prettier-ignore-end -->
-
-#### Roots and Element Internals
-
-You can always define the internals the same as you usually would, and if for some reason you need access to either the element itself or the shadow root, you can do so as illustrated below.
-
-<!-- prettier-ignore-start -->
-```ts
-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 -->
-
-#### 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.
-
-The `css` tagged template function will construct a `CSSStyleSheet` object that can be adopted by documents and shadow roots.
-
-<!-- prettier-ignore-start -->
-```ts
-import { customElement, css } from 'thunderous';
-
-const myStyleSheet = css`
-  :host {
-    display: block;
-    font-family: sans-serif;
-  }
-`;
-
-const MyElement = customElement(({ adoptStyleSheet }) => {
-  adoptStyleSheet(myStyleSheet);
-  /* ... */
-});
-```
-<!-- prettier-ignore-end -->
-
-### Non-Native extras
-
-In addition to the native features, there are a few features that supercharge your web components. Most notably, signals.
-
-#### Signals
-
-Creating signals should look pretty familiar to most modern developers.
-
-<!-- prettier-ignore-start -->
-```ts
-import { createSignal } from 'thunderous';
-
-const [count, setCount] = createSignal(0);
-console.log(count()); // 0
-setCount(1);
-console.log(count()) // 1
-```
-<!-- prettier-ignore-end -->
-
-##### Binding Signals to Templates
-
-To bind signals to a template, use the provided `html` tagged template function to pass them in.
-
-<!-- prettier-ignore-start -->
-```ts
-import { createSignal, customElement, html } from 'thunderous';
-
-const MyElement = customElement(() => {
-  const [count, setCount] = createSignal(0);
-  // presumably setCount() gets called
-  return html`<output>${count}</output>`;
-});
-```
-<!-- prettier-ignore-end -->
-
-> NOTICE: we are not running the signal's getter above. This is intentional, as we delegate that to the template to run for proper binding.
-
-By binding signals to templates, you allow fine-grained updates to be made directly to DOM nodes every time the signal changes, without requiring any diffing or re-rendering.
-
-> This also works for `css`, but bear in mind that passing signals to a shared `CSSStyleSheet` may not have the effect you expect. Sharing Style Sheets across many component instances is best for performance, but signals will update every instance of each component with that approach. The suggested alternative is to write static CSS and toggle classes in the HTML instead.
-
-##### Attribute Signals
-
-By default, each element is observed with a `MutationObserver` watching all attributes. Changes to _any_ attribute trigger the `attributeChangedCallback` and you can access all attributes as signals. This makes it much less cumbersome to write reactive attributes.
-
-<!-- prettier-ignore-start -->
-```ts
-const MyElement = customElement(({ attrSignals }) => {
-  const [heading, setHeading] = attrSignals['my-heading'];
-  // setHeading() will also update the attribute in the DOM.
-  return html`<h2>${heading}</h2>`;
-});
-```
-<!-- prettier-ignore-end -->
-
-However, the `MutationObserver` does impose a small performance tradeoff that may add up if you render a lot of elements. To better optimize for performance, you can pass `observedAttributes` to the options. Doing so will disable the `MutationObserver`, and only the observed attributes will trigger the `attributeChangedCallback`.
-
-<!-- prettier-ignore-start -->
-```ts
-const MyElement = customElement(({ attrSignals }) => {
-  const [heading, setHeading] = attrSignals['my-heading'];
-  return html`<h2>${heading}</h2>`;
-}, { observedAttributes: ['my-heading'] });
-```
-<!-- prettier-ignore-end -->
-
-Usage:
-
-```html
-<my-element my-heading="My Element's Title"></my-element>
-```
-
-> NOTICE: Since `attrSignals` is a `Proxy` object, _any_ property will return a signal and auto-bind it to the attribute it corresponds with.
-
-##### 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.
-
-```ts
-import { derived, createSignal } from 'thunderous';
-
-const [count, setCount] = createSignal(0);
-const timesTen = derived(() => count() * 10);
-console.log(timesTen()); // 0
-setCount(10);
-console.log(timesTen()); // 100
-```
-
-##### Effects
-
-To run a callback each time a signal is changed, use the `createEffect()` function. Any signal used inside will trigger the callback when they're changed.
-
-```ts
-import { createEffect } from 'thunderous';
-
-/* ... */
-createEffect(() => {
-  console.log(count());
-});
-```
-
-##### Debugging Signals
-
-If you're having a tough time tracing an issue, you can provide the `debugMode` option to any signal to log potentially helpful information to the console. For differentiating values, you can also provide an optional `label` property to easily associate logs with their respective sources. These options can be passed to signals themselves, or to specific calls to setters and getters.
-
-```ts
-const [count, setCount] = createSignal(0, {
-  debugMode: true,
-  label: 'count signal',
-});
-
-setCount(1, {
-  debugMode: true,
-  label: 'start count',
-});
-
-const newCount = count({
-  debugMode: true,
-  label: 'new count',
-});
-```
-
-#### Refs
-
-The refs property exists for convenience to avoid manually querying the DOM. Since the DOM is only available after rendering, refs will only work in and after the `connectedCallback` method.
-
-<!-- prettier-ignore-start -->
-```ts
-const MyElement = customElement(({ connectedCallback, refs }) => {
-  connectedCallback(() => {
-    console.log(refs.heading.textContent); // hello world
-  });
-  return html`<h2 ref="heading">hello world</h2>`;
-});
-```
-<!-- prettier-ignore-end -->
-
-#### Event Binding
-
-While you could bind events in the `connectedCallback()` with `refs.button.addEventListener('click', handleClick)` for example, it may be more convenient to register a custom callback and bind it to the template.
-
-<!-- prettier-ignore-start -->
-```ts
-const MyElement = customElement(({ customCallback }) => {
-  const [count, setCount] = createSignal(0);
-  const increment = customCallback(() => setCount(count() + 1));
-  return html`
-    <button onclick="${increment}">Increment</button>
-    <output>${count}</output>
-  `;
-});
-```
-<!-- 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.
-
-### Defining Custom Elements
-
-The `customElement()` function allows you to author a web component, returning an `ElementResult` that has some helpful methods like `define()` and `eject()`.
-
-- `ElementResult.define()` is a little safer than `customElements.define()` because it first checks if the component was already defined, without throwing an error. It will, however, log a warning. There's no need to pass the class since it already has that context.
-
-  ```ts
-  const MyElement = customElement(() => html`<slot></slot>`);
-
-  MyElement.define('my-element');
-  ```
-
-- `ElementResult.eject()` is useful in case you need to access the underlying class for some reason; perhaps you want to extend it and/or set static properties.
-
-  ```ts
-  const MyElementClass = MyElement.eject();
-
-  class MyOtherElement extends MyElementClass {
-    /* ... */
-  }
-  ```
-
-These may also be chained together, like `MyElement.define('my-element').eject()`.
+Please consult the [documentation](https://thunderous.dev) to learn how to build web components with Thunderous.
 
 ## Contributing
 

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.3",
+	"version": "0.3.1",
 	"description": "",
 	"type": "module",
 	"main": "./dist/index.cjs",
@@ -43,7 +43,7 @@
 		"eslint-plugin-promise": "^7.1.0",
 		"express": "^4.17.1",
 		"prettier": "^3.3.3",
-		"typescript": "^5.6.3",
-		"tsup": "^8.3.0"
+		"tsup": "^8.3.0",
+		"typescript": "^5.6.3"
 	}
 }