@taybart/corvid 0.2.2 → 0.2.3

package/dist/dom.d.ts

@@ -58,7 +58,7 @@ export declare class el {
     content(content: any, { text }?: {
         text?: boolean;
     }): this;
-    html(content: string): this;
+    html(content: string | HTMLElement | el): this;
     src(url: string): this;
     attrs(attrs: Object): this;
     attr(key: string, val: string): this;
@@ -66,6 +66,7 @@ export declare class el {
     /*** Style ***/
     style(update: Object | string, stringify?: boolean): this;
     hasClass(className: string): boolean;
+    toggleClass(className: string): this;
     addClass(className: string | string[]): this;
     removeClass(className: string | string[]): this;
     /*** Events ***/
@@ -84,20 +85,7 @@ export declare class el {
  */
 export declare function create<T extends HTMLElement = HTMLElement>(opts: elOpts, verbose?: boolean): T;
 /*** component ***/
-/**
- * Base class for custom elements. It handles registration, the component's
- * stylesheet, and a mount hook
- *   class SearchForm extends component {
- *     static tag = 'x-search-form'
- *     static styles = { input: { border: 'none' } }
- *     input = create({ tag: 'input' })
- *     mount() {
- *       this.input.addEventListener('keydown', (e) => ...)
- *       this.append(this.input)
- *     }
- *   }
- *   SearchForm.register()
- */
+export declare function registerComponents(components: (typeof component)[], verbose?: boolean): void;
 export declare class component extends HTMLElement {
     #private;
     /** the name to register as; must contain a hyphen */
@@ -108,12 +96,38 @@ export declare class component extends HTMLElement {
      * the class actually registered under.
      */
     static styles: style.declarations | null;
+    /**
+     * Opt in to a shadow root: `static shadow = { mode: 'open' }`.
+     *
+     * Without it a component's `styles` are injected at document level and
+     * compile to plain descendant selectors, so an outer component's `ul` or
+     * `.meta` rule reaches an inner component's markup — and only has to name a
+     * property the inner rule leaves unset to take effect. A shadow root ends
+     * that by construction, in both directions.
+     *
+     * What changes for the component: put children in `this.root`, not `this`.
+     * Two things to know before turning it on —
+     *
+     * - light-dom children are not rendered unless the root has a `<slot>`, so a
+     *   component that takes `content` needs one
+     * - a nested custom element loses its document styles inside the root, so
+     *   anything rendered in here has to be shadowed too
+     * DOCS: https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM
+     */
+    static shadow: ShadowRootInit | null;
+    constructor();
+    /**
+     * Where this component's children belong: its shadow root when it has one,
+     * otherwise the element itself. Use it instead of `this` for `append`,
+     * `replaceChildren` and `querySelector`, and the component works either way.
+     */
+    get root(): ShadowRoot | this;
     /**
      * Inject this component's styles and define it. Idempotent, so calling it
      * twice (or after an HMR reload) is harmless.
      * @param tag - overrides `static tag`
      */
-    static register(tag?: string): void;
+    static register(tag?: string, verbose?: boolean): void;
     /**
      * Called once, the first time the element is connected. Build the subtree and
      * wire listeners here — a custom element cannot give itself children before

package/dist/dom.js

@@ -27,9 +27,52 @@ function splitSelectors(selector) {
     if (current.trim()) out.push(current.trim());
     return out;
 }
+function hostCompound(selector) {
+    if (!selector.startsWith(':host')) return selector;
+    let i = 5;
+    let inner = '';
+    if ('(' === selector[i]) {
+        const open = i;
+        let depth = 0;
+        let quote = '';
+        while(i < selector.length){
+            const ch = selector[i];
+            if (quote) {
+                if (ch === quote) quote = '';
+            } else if ('"' === ch || "'" === ch) quote = ch;
+            else if ('(' === ch) depth++;
+            else if (')' === ch) {
+                depth--;
+                if (0 === depth) {
+                    i++;
+                    break;
+                }
+            }
+            i++;
+        }
+        inner = selector.slice(open + 1, i - 1);
+    }
+    const start = i;
+    let depth = 0;
+    let quote = '';
+    while(i < selector.length){
+        const ch = selector[i];
+        if (quote) {
+            if (ch === quote) quote = '';
+        } else if ('"' === ch || "'" === ch) quote = ch;
+        else if (0 === depth && (' ' === ch || '>' === ch || '+' === ch || '~' === ch)) break;
+        else if (0 === depth && ':' === ch && ':' === selector[i + 1]) break;
+        else if ('(' === ch || '[' === ch) depth++;
+        else if (')' === ch || ']' === ch) depth--;
+        i++;
+    }
+    const compound = selector.slice(start, i);
+    if (!compound) return selector;
+    return `:host(${inner}${compound})${selector.slice(i)}`;
+}
 function resolve(parents, selector) {
     const out = [];
-    for (const parent of parents)for (const part of splitSelectors(selector))out.push(part.includes('&') ? part.replaceAll('&', parent) : `${parent} ${part}`);
+    for (const parent of parents)for (const part of splitSelectors(selector))out.push(hostCompound(part.includes('&') ? part.replaceAll('&', parent) : `${parent} ${part}`));
     return out;
 }
 function compile(parents, decls, indent = '') {
@@ -97,6 +140,20 @@ function inject(selector, style, { key = selector } = {}) {
     sheets.set(key, node);
     return rules;
 }
+function shadowSheet(key, style) {
+    const rules = css(':host', style);
+    if ('undefined' == typeof CSSStyleSheet || !('replaceSync' in CSSStyleSheet.prototype) || 'undefined' == typeof ShadowRoot || !('adoptedStyleSheets' in ShadowRoot.prototype)) return rules;
+    const sheets = registry();
+    const existing = sheets.get(key);
+    if (existing && 'replaceSync' in existing) {
+        existing.replaceSync(rules);
+        return existing;
+    }
+    const sheet = new CSSStyleSheet();
+    sheet.replaceSync(rules);
+    sheets.set(key, sheet);
+    return sheet;
+}
 function _define_property(obj, key, value) {
     if (key in obj) Object.defineProperty(obj, key, {
         value: value,
@@ -297,7 +354,10 @@ class dom_el {
     }
     html(content) {
         if (!this.el) throw new Error(`no element from query: ${this.query}`);
-        this.el.innerHTML = content;
+        if ('string' == typeof content) this.el.innerHTML = content;
+        else if (content instanceof dom_el) {
+            if (content.el) this.el.replaceChildren(content.el);
+        } else this.el.replaceChildren(content);
         return this;
     }
     src(url) {
@@ -338,6 +398,12 @@ class dom_el {
         if (!this.el) throw new Error(`no element from query: ${this.query}`);
         return this.el.classList.contains(className);
     }
+    toggleClass(className) {
+        if (!this.el) throw new Error(`no element from query: ${this.query}`);
+        if (this.el.classList.contains(className)) this.el.classList.remove(className);
+        else this.el.classList.add(className);
+        return this;
+    }
     addClass(className) {
         if (!this.el) throw new Error(`no element from query: ${this.query}`);
         if ('string' == typeof className) this.el.classList.add(className);
@@ -433,13 +499,22 @@ function create(opts, verbose = false) {
     if (!node) throw new Error(`could not create element: ${opts.tag ?? opts.query ?? '?'}`);
     return node;
 }
-var _mounted = /*#__PURE__*/ new WeakMap(), _pendingAttrs = /*#__PURE__*/ new WeakMap();
+function registerComponents(components, verbose = false) {
+    for (const c of components)c.register(void 0, verbose);
+}
+const dom_sheets = new WeakMap();
+var _mounted = /*#__PURE__*/ new WeakMap(), _root = /*#__PURE__*/ new WeakMap(), _pendingAttrs = /*#__PURE__*/ new WeakMap();
 class component extends HTMLElement {
-    static register(tag) {
+    get root() {
+        return _class_private_field_get(this, _root) ?? this;
+    }
+    static register(tag, verbose = false) {
         const name = tag ?? this.tag;
         if (!name) throw new Error(`${this.name}: nothing to register as, set \`static tag = 'x-...'\``);
         if (!name.includes('-')) throw new Error(`${this.name}: '${name}' is not a valid custom element name, it needs a hyphen`);
-        if (this.styles) inject(name, this.styles);
+        if (this.styles) if (this.shadow) dom_sheets.set(this, shadowSheet(`shadow:${name}`, this.styles));
+        else inject(name, this.styles);
+        if (verbose) console.log(`registering ${name}`);
         registerElement(name, this);
     }
     mount() {}
@@ -466,18 +541,35 @@ class component extends HTMLElement {
         ]);
         this.onAttr(name, value, prev);
     }
-    constructor(...args){
-        super(...args), _class_private_field_init(this, _mounted, {
+    constructor(){
+        super(), _class_private_field_init(this, _mounted, {
             writable: true,
             value: false
+        }), _class_private_field_init(this, _root, {
+            writable: true,
+            value: null
         }), _class_private_field_init(this, _pendingAttrs, {
             writable: true,
             value: []
         });
+        const ctor = this.constructor;
+        if (!ctor.shadow) return;
+        _class_private_field_set(this, _root, this.attachShadow(ctor.shadow));
+        const sheet = dom_sheets.get(ctor);
+        if (void 0 === sheet) return;
+        if ('string' == typeof sheet) {
+            const node = document.createElement('style');
+            node.textContent = sheet;
+            _class_private_field_get(this, _root).append(node);
+        } else _class_private_field_get(this, _root).adoptedStyleSheets = [
+            ..._class_private_field_get(this, _root).adoptedStyleSheets,
+            sheet
+        ];
     }
 }
 dom_define_property(component, "tag", '');
 dom_define_property(component, "styles", null);
+dom_define_property(component, "shadow", null);
 function interpolate(str, params) {
     let names = Object.keys(params).map((k)=>`_${k}`);
     let vals = Object.values(params);
@@ -493,4 +585,4 @@ const dom = {
     on,
     onKey
 };
-export { component, create, dom as default, dom_el as el, els, interpolate, on, onBlur, onFocus, onKey, ready, registerElement };
+export { component, create, dom as default, dom_el as el, els, interpolate, on, onBlur, onFocus, onKey, ready, registerComponents, registerElement };

package/dist/index.js

@@ -38,6 +38,7 @@ __webpack_require__.d(style_namespaceObject, {
     isDarkMode: ()=>isDarkMode,
     onDarkMode: ()=>onDarkMode,
     render: ()=>render,
+    shadowSheet: ()=>shadowSheet,
     switchTheme: ()=>switchTheme
 });
 var dom_namespaceObject = {};
@@ -54,6 +55,7 @@ __webpack_require__.d(dom_namespaceObject, {
     onFocus: ()=>onFocus,
     onKey: ()=>onKey,
     ready: ()=>ready,
+    registerComponents: ()=>registerComponents,
     registerElement: ()=>registerElement
 });
 var network_namespaceObject = {};
@@ -152,9 +154,52 @@ function splitSelectors(selector) {
     if (current.trim()) out.push(current.trim());
     return out;
 }
+function hostCompound(selector) {
+    if (!selector.startsWith(':host')) return selector;
+    let i = 5;
+    let inner = '';
+    if ('(' === selector[i]) {
+        const open = i;
+        let depth = 0;
+        let quote = '';
+        while(i < selector.length){
+            const ch = selector[i];
+            if (quote) {
+                if (ch === quote) quote = '';
+            } else if ('"' === ch || "'" === ch) quote = ch;
+            else if ('(' === ch) depth++;
+            else if (')' === ch) {
+                depth--;
+                if (0 === depth) {
+                    i++;
+                    break;
+                }
+            }
+            i++;
+        }
+        inner = selector.slice(open + 1, i - 1);
+    }
+    const start = i;
+    let depth = 0;
+    let quote = '';
+    while(i < selector.length){
+        const ch = selector[i];
+        if (quote) {
+            if (ch === quote) quote = '';
+        } else if ('"' === ch || "'" === ch) quote = ch;
+        else if (0 === depth && (' ' === ch || '>' === ch || '+' === ch || '~' === ch)) break;
+        else if (0 === depth && ':' === ch && ':' === selector[i + 1]) break;
+        else if ('(' === ch || '[' === ch) depth++;
+        else if (')' === ch || ']' === ch) depth--;
+        i++;
+    }
+    const compound = selector.slice(start, i);
+    if (!compound) return selector;
+    return `:host(${inner}${compound})${selector.slice(i)}`;
+}
 function resolve(parents, selector) {
     const out = [];
-    for (const parent of parents)for (const part of splitSelectors(selector))out.push(part.includes('&') ? part.replaceAll('&', parent) : `${parent} ${part}`);
+    for (const parent of parents)for (const part of splitSelectors(selector))out.push(hostCompound(part.includes('&') ? part.replaceAll('&', parent) : `${parent} ${part}`));
     return out;
 }
 function compile(parents, decls, indent = '') {
@@ -222,6 +267,20 @@ function inject(selector, style, { key = selector } = {}) {
     sheets.set(key, node);
     return rules;
 }
+function shadowSheet(key, style) {
+    const rules = css(':host', style);
+    if ('undefined' == typeof CSSStyleSheet || !('replaceSync' in CSSStyleSheet.prototype) || 'undefined' == typeof ShadowRoot || !('adoptedStyleSheets' in ShadowRoot.prototype)) return rules;
+    const sheets = registry();
+    const existing = sheets.get(key);
+    if (existing && 'replaceSync' in existing) {
+        existing.replaceSync(rules);
+        return existing;
+    }
+    const sheet = new CSSStyleSheet();
+    sheet.replaceSync(rules);
+    sheets.set(key, sheet);
+    return sheet;
+}
 function eject(key) {
     const sheets = registry();
     const sheet = sheets.get(key);
@@ -509,7 +568,10 @@ class dom_el {
     }
     html(content) {
         if (!this.el) throw new Error(`no element from query: ${this.query}`);
-        this.el.innerHTML = content;
+        if ('string' == typeof content) this.el.innerHTML = content;
+        else if (content instanceof dom_el) {
+            if (content.el) this.el.replaceChildren(content.el);
+        } else this.el.replaceChildren(content);
         return this;
     }
     src(url) {
@@ -550,6 +612,12 @@ class dom_el {
         if (!this.el) throw new Error(`no element from query: ${this.query}`);
         return this.el.classList.contains(className);
     }
+    toggleClass(className) {
+        if (!this.el) throw new Error(`no element from query: ${this.query}`);
+        if (this.el.classList.contains(className)) this.el.classList.remove(className);
+        else this.el.classList.add(className);
+        return this;
+    }
     addClass(className) {
         if (!this.el) throw new Error(`no element from query: ${this.query}`);
         if ('string' == typeof className) this.el.classList.add(className);
@@ -645,13 +713,22 @@ function create(opts, verbose = false) {
     if (!node) throw new Error(`could not create element: ${opts.tag ?? opts.query ?? '?'}`);
     return node;
 }
-var _mounted = /*#__PURE__*/ new WeakMap(), _pendingAttrs = /*#__PURE__*/ new WeakMap();
+function registerComponents(components, verbose = false) {
+    for (const c of components)c.register(void 0, verbose);
+}
+const dom_sheets = new WeakMap();
+var _mounted = /*#__PURE__*/ new WeakMap(), _root = /*#__PURE__*/ new WeakMap(), _pendingAttrs = /*#__PURE__*/ new WeakMap();
 class component extends HTMLElement {
-    static register(tag) {
+    get root() {
+        return _class_private_field_get(this, _root) ?? this;
+    }
+    static register(tag, verbose = false) {
         const name = tag ?? this.tag;
         if (!name) throw new Error(`${this.name}: nothing to register as, set \`static tag = 'x-...'\``);
         if (!name.includes('-')) throw new Error(`${this.name}: '${name}' is not a valid custom element name, it needs a hyphen`);
-        if (this.styles) inject(name, this.styles);
+        if (this.styles) if (this.shadow) dom_sheets.set(this, shadowSheet(`shadow:${name}`, this.styles));
+        else inject(name, this.styles);
+        if (verbose) console.log(`registering ${name}`);
         registerElement(name, this);
     }
     mount() {}
@@ -678,18 +755,35 @@ class component extends HTMLElement {
         ]);
         this.onAttr(name, value, prev);
     }
-    constructor(...args){
-        super(...args), _class_private_field_init(this, _mounted, {
+    constructor(){
+        super(), _class_private_field_init(this, _mounted, {
             writable: true,
             value: false
+        }), _class_private_field_init(this, _root, {
+            writable: true,
+            value: null
         }), _class_private_field_init(this, _pendingAttrs, {
             writable: true,
             value: []
         });
+        const ctor = this.constructor;
+        if (!ctor.shadow) return;
+        _class_private_field_set(this, _root, this.attachShadow(ctor.shadow));
+        const sheet = dom_sheets.get(ctor);
+        if (void 0 === sheet) return;
+        if ('string' == typeof sheet) {
+            const node = document.createElement('style');
+            node.textContent = sheet;
+            _class_private_field_get(this, _root).append(node);
+        } else _class_private_field_get(this, _root).adoptedStyleSheets = [
+            ..._class_private_field_get(this, _root).adoptedStyleSheets,
+            sheet
+        ];
     }
 }
 dom_define_property(component, "tag", '');
 dom_define_property(component, "styles", null);
+dom_define_property(component, "shadow", null);
 function interpolate(str, params) {
     let names = Object.keys(params).map((k)=>`_${k}`);
     let vals = Object.values(params);

package/dist/ls.js

@@ -27,9 +27,52 @@ function splitSelectors(selector) {
     if (current.trim()) out.push(current.trim());
     return out;
 }
+function hostCompound(selector) {
+    if (!selector.startsWith(':host')) return selector;
+    let i = 5;
+    let inner = '';
+    if ('(' === selector[i]) {
+        const open = i;
+        let depth = 0;
+        let quote = '';
+        while(i < selector.length){
+            const ch = selector[i];
+            if (quote) {
+                if (ch === quote) quote = '';
+            } else if ('"' === ch || "'" === ch) quote = ch;
+            else if ('(' === ch) depth++;
+            else if (')' === ch) {
+                depth--;
+                if (0 === depth) {
+                    i++;
+                    break;
+                }
+            }
+            i++;
+        }
+        inner = selector.slice(open + 1, i - 1);
+    }
+    const start = i;
+    let depth = 0;
+    let quote = '';
+    while(i < selector.length){
+        const ch = selector[i];
+        if (quote) {
+            if (ch === quote) quote = '';
+        } else if ('"' === ch || "'" === ch) quote = ch;
+        else if (0 === depth && (' ' === ch || '>' === ch || '+' === ch || '~' === ch)) break;
+        else if (0 === depth && ':' === ch && ':' === selector[i + 1]) break;
+        else if ('(' === ch || '[' === ch) depth++;
+        else if (')' === ch || ']' === ch) depth--;
+        i++;
+    }
+    const compound = selector.slice(start, i);
+    if (!compound) return selector;
+    return `:host(${inner}${compound})${selector.slice(i)}`;
+}
 function resolve(parents, selector) {
     const out = [];
-    for (const parent of parents)for (const part of splitSelectors(selector))out.push(part.includes('&') ? part.replaceAll('&', parent) : `${parent} ${part}`);
+    for (const parent of parents)for (const part of splitSelectors(selector))out.push(hostCompound(part.includes('&') ? part.replaceAll('&', parent) : `${parent} ${part}`));
     return out;
 }
 function compile(parents, decls, indent = '') {
@@ -97,6 +140,20 @@ function inject(selector, style, { key = selector } = {}) {
     sheets.set(key, node);
     return rules;
 }
+function shadowSheet(key, style) {
+    const rules = css(':host', style);
+    if ('undefined' == typeof CSSStyleSheet || !('replaceSync' in CSSStyleSheet.prototype) || 'undefined' == typeof ShadowRoot || !('adoptedStyleSheets' in ShadowRoot.prototype)) return rules;
+    const sheets = registry();
+    const existing = sheets.get(key);
+    if (existing && 'replaceSync' in existing) {
+        existing.replaceSync(rules);
+        return existing;
+    }
+    const sheet = new CSSStyleSheet();
+    sheet.replaceSync(rules);
+    sheets.set(key, sheet);
+    return sheet;
+}
 function _define_property(obj, key, value) {
     if (key in obj) Object.defineProperty(obj, key, {
         value: value,
@@ -258,7 +315,10 @@ class dom_el {
     }
     html(content) {
         if (!this.el) throw new Error(`no element from query: ${this.query}`);
-        this.el.innerHTML = content;
+        if ('string' == typeof content) this.el.innerHTML = content;
+        else if (content instanceof dom_el) {
+            if (content.el) this.el.replaceChildren(content.el);
+        } else this.el.replaceChildren(content);
         return this;
     }
     src(url) {
@@ -299,6 +359,12 @@ class dom_el {
         if (!this.el) throw new Error(`no element from query: ${this.query}`);
         return this.el.classList.contains(className);
     }
+    toggleClass(className) {
+        if (!this.el) throw new Error(`no element from query: ${this.query}`);
+        if (this.el.classList.contains(className)) this.el.classList.remove(className);
+        else this.el.classList.add(className);
+        return this;
+    }
     addClass(className) {
         if (!this.el) throw new Error(`no element from query: ${this.query}`);
         if ('string' == typeof className) this.el.classList.add(className);
@@ -389,13 +455,19 @@ class dom_el {
         }
     }
 }
-var _mounted = /*#__PURE__*/ new WeakMap(), _pendingAttrs = /*#__PURE__*/ new WeakMap();
+const dom_sheets = new WeakMap();
+var _mounted = /*#__PURE__*/ new WeakMap(), _root = /*#__PURE__*/ new WeakMap(), _pendingAttrs = /*#__PURE__*/ new WeakMap();
 class component extends HTMLElement {
-    static register(tag) {
+    get root() {
+        return _class_private_field_get(this, _root) ?? this;
+    }
+    static register(tag, verbose = false) {
         const name = tag ?? this.tag;
         if (!name) throw new Error(`${this.name}: nothing to register as, set \`static tag = 'x-...'\``);
         if (!name.includes('-')) throw new Error(`${this.name}: '${name}' is not a valid custom element name, it needs a hyphen`);
-        if (this.styles) inject(name, this.styles);
+        if (this.styles) if (this.shadow) dom_sheets.set(this, shadowSheet(`shadow:${name}`, this.styles));
+        else inject(name, this.styles);
+        if (verbose) console.log(`registering ${name}`);
         registerElement(name, this);
     }
     mount() {}
@@ -422,18 +494,35 @@ class component extends HTMLElement {
         ]);
         this.onAttr(name, value, prev);
     }
-    constructor(...args){
-        super(...args), _class_private_field_init(this, _mounted, {
+    constructor(){
+        super(), _class_private_field_init(this, _mounted, {
             writable: true,
             value: false
+        }), _class_private_field_init(this, _root, {
+            writable: true,
+            value: null
         }), _class_private_field_init(this, _pendingAttrs, {
             writable: true,
             value: []
         });
+        const ctor = this.constructor;
+        if (!ctor.shadow) return;
+        _class_private_field_set(this, _root, this.attachShadow(ctor.shadow));
+        const sheet = dom_sheets.get(ctor);
+        if (void 0 === sheet) return;
+        if ('string' == typeof sheet) {
+            const node = document.createElement('style');
+            node.textContent = sheet;
+            _class_private_field_get(this, _root).append(node);
+        } else _class_private_field_get(this, _root).adoptedStyleSheets = [
+            ..._class_private_field_get(this, _root).adoptedStyleSheets,
+            sheet
+        ];
     }
 }
 dom_define_property(component, "tag", '');
 dom_define_property(component, "styles", null);
+dom_define_property(component, "shadow", null);
 function get(key, _default) {
     let ret = localStorage.getItem(key);
     if (null === ret && null != _default) {

package/dist/qr.js

@@ -1933,9 +1933,52 @@ function splitSelectors(selector) {
     if (current.trim()) out.push(current.trim());
     return out;
 }
+function hostCompound(selector) {
+    if (!selector.startsWith(':host')) return selector;
+    let i = 5;
+    let inner = '';
+    if ('(' === selector[i]) {
+        const open = i;
+        let depth = 0;
+        let quote = '';
+        while(i < selector.length){
+            const ch = selector[i];
+            if (quote) {
+                if (ch === quote) quote = '';
+            } else if ('"' === ch || "'" === ch) quote = ch;
+            else if ('(' === ch) depth++;
+            else if (')' === ch) {
+                depth--;
+                if (0 === depth) {
+                    i++;
+                    break;
+                }
+            }
+            i++;
+        }
+        inner = selector.slice(open + 1, i - 1);
+    }
+    const start = i;
+    let depth = 0;
+    let quote = '';
+    while(i < selector.length){
+        const ch = selector[i];
+        if (quote) {
+            if (ch === quote) quote = '';
+        } else if ('"' === ch || "'" === ch) quote = ch;
+        else if (0 === depth && (' ' === ch || '>' === ch || '+' === ch || '~' === ch)) break;
+        else if (0 === depth && ':' === ch && ':' === selector[i + 1]) break;
+        else if ('(' === ch || '[' === ch) depth++;
+        else if (')' === ch || ']' === ch) depth--;
+        i++;
+    }
+    const compound = selector.slice(start, i);
+    if (!compound) return selector;
+    return `:host(${inner}${compound})${selector.slice(i)}`;
+}
 function resolve(parents, selector) {
     const out = [];
-    for (const parent of parents)for (const part of splitSelectors(selector))out.push(part.includes('&') ? part.replaceAll('&', parent) : `${parent} ${part}`);
+    for (const parent of parents)for (const part of splitSelectors(selector))out.push(hostCompound(part.includes('&') ? part.replaceAll('&', parent) : `${parent} ${part}`));
     return out;
 }
 function compile(parents, decls, indent = '') {
@@ -2003,6 +2046,20 @@ function inject(selector, style, { key = selector } = {}) {
     sheets.set(key, node);
     return rules;
 }
+function shadowSheet(key, style) {
+    const rules = css(':host', style);
+    if ('undefined' == typeof CSSStyleSheet || !('replaceSync' in CSSStyleSheet.prototype) || 'undefined' == typeof ShadowRoot || !('adoptedStyleSheets' in ShadowRoot.prototype)) return rules;
+    const sheets = registry();
+    const existing = sheets.get(key);
+    if (existing && 'replaceSync' in existing) {
+        existing.replaceSync(rules);
+        return existing;
+    }
+    const sheet = new CSSStyleSheet();
+    sheet.replaceSync(rules);
+    sheets.set(key, sheet);
+    return sheet;
+}
 function utils_define_property(obj, key, value) {
     if (key in obj) Object.defineProperty(obj, key, {
         value: value,
@@ -2164,7 +2221,10 @@ class dom_el {
     }
     html(content) {
         if (!this.el) throw new Error(`no element from query: ${this.query}`);
-        this.el.innerHTML = content;
+        if ('string' == typeof content) this.el.innerHTML = content;
+        else if (content instanceof dom_el) {
+            if (content.el) this.el.replaceChildren(content.el);
+        } else this.el.replaceChildren(content);
         return this;
     }
     src(url) {
@@ -2205,6 +2265,12 @@ class dom_el {
         if (!this.el) throw new Error(`no element from query: ${this.query}`);
         return this.el.classList.contains(className);
     }
+    toggleClass(className) {
+        if (!this.el) throw new Error(`no element from query: ${this.query}`);
+        if (this.el.classList.contains(className)) this.el.classList.remove(className);
+        else this.el.classList.add(className);
+        return this;
+    }
     addClass(className) {
         if (!this.el) throw new Error(`no element from query: ${this.query}`);
         if ('string' == typeof className) this.el.classList.add(className);
@@ -2295,13 +2361,19 @@ class dom_el {
         }
     }
 }
-var _mounted = /*#__PURE__*/ new WeakMap(), _pendingAttrs = /*#__PURE__*/ new WeakMap();
+const dom_sheets = new WeakMap();
+var _mounted = /*#__PURE__*/ new WeakMap(), _root = /*#__PURE__*/ new WeakMap(), _pendingAttrs = /*#__PURE__*/ new WeakMap();
 class component extends HTMLElement {
-    static register(tag) {
+    get root() {
+        return _class_private_field_get(this, _root) ?? this;
+    }
+    static register(tag, verbose = false) {
         const name = tag ?? this.tag;
         if (!name) throw new Error(`${this.name}: nothing to register as, set \`static tag = 'x-...'\``);
         if (!name.includes('-')) throw new Error(`${this.name}: '${name}' is not a valid custom element name, it needs a hyphen`);
-        if (this.styles) inject(name, this.styles);
+        if (this.styles) if (this.shadow) dom_sheets.set(this, shadowSheet(`shadow:${name}`, this.styles));
+        else inject(name, this.styles);
+        if (verbose) console.log(`registering ${name}`);
         registerElement(name, this);
     }
     mount() {}
@@ -2328,18 +2400,35 @@ class component extends HTMLElement {
         ]);
         this.onAttr(name, value, prev);
     }
-    constructor(...args){
-        super(...args), _class_private_field_init(this, _mounted, {
+    constructor(){
+        super(), _class_private_field_init(this, _mounted, {
             writable: true,
             value: false
+        }), _class_private_field_init(this, _root, {
+            writable: true,
+            value: null
         }), _class_private_field_init(this, _pendingAttrs, {
             writable: true,
             value: []
         });
+        const ctor = this.constructor;
+        if (!ctor.shadow) return;
+        _class_private_field_set(this, _root, this.attachShadow(ctor.shadow));
+        const sheet = dom_sheets.get(ctor);
+        if (void 0 === sheet) return;
+        if ('string' == typeof sheet) {
+            const node = document.createElement('style');
+            node.textContent = sheet;
+            _class_private_field_get(this, _root).append(node);
+        } else _class_private_field_get(this, _root).adoptedStyleSheets = [
+            ..._class_private_field_get(this, _root).adoptedStyleSheets,
+            sheet
+        ];
     }
 }
 dom_define_property(component, "tag", '');
 dom_define_property(component, "styles", null);
+dom_define_property(component, "shadow", null);
 class QR {
     static render(config, element) {
         const settings = this.getDefaultSettings(config);

package/dist/style.d.ts

@@ -34,6 +34,20 @@ export declare function css(selector: string, style: declarations): string;
 export declare function inject(selector: string, style: declarations, { key }?: {
     key?: string;
 }): string;
+/**
+ * Compile `style` for a shadow root, rooted at `:host`.
+ *
+ * Hands back a constructable sheet where the platform has them — one per key,
+ * shared by every instance of the component, so a thousand cards cost one
+ * sheet — and the css text otherwise, for the caller to put in a `<style>`
+ * inside the root. Re-compiling an existing key replaces that sheet's contents
+ * in place, so live instances pick the change up (which is what makes an HMR
+ * reload work rather than stack a second sheet).
+ *
+ * Document styles do not reach into a shadow tree, so this is the only way a
+ * shadowed component gets styled at all.
+ */
+export declare function shadowSheet(key: string, style: declarations): CSSStyleSheet | string;
 /**
  * Remove a stylesheet installed by `inject`
  * @param key - the key it was injected under (the selector, unless overridden)

package/dist/style.js

@@ -31,9 +31,52 @@ function splitSelectors(selector) {
     if (current.trim()) out.push(current.trim());
     return out;
 }
+function hostCompound(selector) {
+    if (!selector.startsWith(':host')) return selector;
+    let i = 5;
+    let inner = '';
+    if ('(' === selector[i]) {
+        const open = i;
+        let depth = 0;
+        let quote = '';
+        while(i < selector.length){
+            const ch = selector[i];
+            if (quote) {
+                if (ch === quote) quote = '';
+            } else if ('"' === ch || "'" === ch) quote = ch;
+            else if ('(' === ch) depth++;
+            else if (')' === ch) {
+                depth--;
+                if (0 === depth) {
+                    i++;
+                    break;
+                }
+            }
+            i++;
+        }
+        inner = selector.slice(open + 1, i - 1);
+    }
+    const start = i;
+    let depth = 0;
+    let quote = '';
+    while(i < selector.length){
+        const ch = selector[i];
+        if (quote) {
+            if (ch === quote) quote = '';
+        } else if ('"' === ch || "'" === ch) quote = ch;
+        else if (0 === depth && (' ' === ch || '>' === ch || '+' === ch || '~' === ch)) break;
+        else if (0 === depth && ':' === ch && ':' === selector[i + 1]) break;
+        else if ('(' === ch || '[' === ch) depth++;
+        else if (')' === ch || ']' === ch) depth--;
+        i++;
+    }
+    const compound = selector.slice(start, i);
+    if (!compound) return selector;
+    return `:host(${inner}${compound})${selector.slice(i)}`;
+}
 function resolve(parents, selector) {
     const out = [];
-    for (const parent of parents)for (const part of splitSelectors(selector))out.push(part.includes('&') ? part.replaceAll('&', parent) : `${parent} ${part}`);
+    for (const parent of parents)for (const part of splitSelectors(selector))out.push(hostCompound(part.includes('&') ? part.replaceAll('&', parent) : `${parent} ${part}`));
     return out;
 }
 function compile(parents, decls, indent = '') {
@@ -101,6 +144,20 @@ function inject(selector, style, { key = selector } = {}) {
     sheets.set(key, node);
     return rules;
 }
+function shadowSheet(key, style) {
+    const rules = css(':host', style);
+    if ('undefined' == typeof CSSStyleSheet || !('replaceSync' in CSSStyleSheet.prototype) || 'undefined' == typeof ShadowRoot || !('adoptedStyleSheets' in ShadowRoot.prototype)) return rules;
+    const sheets = registry();
+    const existing = sheets.get(key);
+    if (existing && 'replaceSync' in existing) {
+        existing.replaceSync(rules);
+        return existing;
+    }
+    const sheet = new CSSStyleSheet();
+    sheet.replaceSync(rules);
+    sheets.set(key, sheet);
+    return sheet;
+}
 function eject(key) {
     const sheets = registry();
     const sheet = sheets.get(key);
@@ -133,4 +190,4 @@ function gradient(start, end, value) {
     const blue = Math.round(start.blue + (end.blue - start.blue) * value / 100);
     return `rgb(${red}, ${green}, ${blue})`;
 }
-export { css, cssVar, eject, gradient, handleThemeSwitch, inject, isDarkMode, onDarkMode, render, switchTheme };
+export { css, cssVar, eject, gradient, handleThemeSwitch, inject, isDarkMode, onDarkMode, render, shadowSheet, switchTheme };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@taybart/corvid",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "type": "module",
   "main": "./dist/index.js",
   "exports": {