typed-dom - npm Package Compare versions

Comparing version 0.0.262 to 0.0.263

dist/typed-dom.js

@@ -1,2 +0,2 @@
-/*! typed-dom v0.0.262 https://github.com/falsandtru/typed-dom | (c) 2016, falsandtru | (Apache-2.0 AND MPL-2.0) License */
+/*! typed-dom v0.0.263 https://github.com/falsandtru/typed-dom | (c) 2016, falsandtru | (Apache-2.0 AND MPL-2.0) License */
 require = function () {
@@ -648,4 +648,4 @@ function r(e, n, t) {
             const dom_1 = _dereq_('./util/dom');
-            function API(baseFactory, formatter) {
-                return new Proxy(() => void 0, handle(baseFactory, formatter));
+            function API(baseFactory, container) {
+                return new Proxy(() => 0, handle(baseFactory, container));
             }
@@ -656,3 +656,3 @@ exports.API = API;
             exports.SVG = API(dom_1.svg);
-            function handle(baseFactory, formatter) {
+            function handle(baseFactory, container) {
                 return {
@@ -674,3 +674,3 @@ apply(target, _, [tag, ...args]) {
                         const el = elem(tag, factory, attrs, children);
-                        return new proxy_1.Elem(tag, el, attrs, children, formatter === null || formatter === void 0 ? void 0 : formatter(el));
+                        return new proxy_1.Elem(tag, el, attrs, children, container === null || container === void 0 ? void 0 : container(el));
                     };
@@ -1014,12 +1014,18 @@ }
                 caches.shadows = new WeakMap();
+                caches.shadow = (0, memoize_1.memoize)((el, opts) => el.attachShadow(opts), caches.shadows);
                 caches.fragment = global_1.document.createDocumentFragment();
             }(caches || (caches = {})));
-            function shadow(el, children, opts) {
-                var _a, _b;
+            function shadow(el, opts, children, factory = exports.html) {
+                var _a, _b, _c, _d;
                 if (typeof el === 'string')
-                    return shadow((0, exports.html)(el), children, opts);
-                if (children && !isChildren(children))
-                    return shadow(el, void 0, children);
-                const root = opts === void 0 ? (_a = el.shadowRoot) !== null && _a !== void 0 ? _a : caches.shadows.get(el) : opts.mode === 'open' ? (_b = el.shadowRoot) !== null && _b !== void 0 ? _b : void 0 : caches.shadows.get(el);
-                return defineChildren(!opts || opts.mode === 'open' ? root !== null && root !== void 0 ? root : el.attachShadow(opts !== null && opts !== void 0 ? opts : { mode: 'open' }) : root !== null && root !== void 0 ? root : caches.shadows.set(el, el.attachShadow(opts)).get(el), !root && children === void 0 ? el.childNodes : children);
+                    return shadow(factory(el), opts, children, factory);
+                if (typeof opts === 'function')
+                    return shadow(el, void 0, children, opts);
+                if (typeof children === 'function')
+                    return shadow(el, opts, void 0, children);
+                if (isChildren(opts))
+                    return shadow(el, void 0, opts, factory);
+                if (children !== void 0 && !isChildren(children))
+                    return shadow(el, void 0, children, factory);
+                return defineChildren(opts === void 0 ? (_b = (_a = el.shadowRoot) !== null && _a !== void 0 ? _a : caches.shadows.get(el)) !== null && _b !== void 0 ? _b : el.attachShadow(opts !== null && opts !== void 0 ? opts : { mode: 'open' }) : opts.mode === 'open' ? (_c = el.shadowRoot) !== null && _c !== void 0 ? _c : el.attachShadow(opts !== null && opts !== void 0 ? opts : { mode: 'open' }) : (_d = caches.shadows.get(el)) !== null && _d !== void 0 ? _d : caches.shadow(el, opts), children);
             }
@@ -1026,0 +1032,0 @@ exports.shadow = shadow;

dom.test.ts

@@ -12,12 +12,16 @@ import { shadow, frag, html, svg, text, define, defrag } from './dom';
       assert(shadow('section').childNodes.length === 0);
-      assert(shadow('section', 'a').textContent === 'a');
-      assert(shadow('section', [html('p')]).innerHTML === '<p></p>');
-      assert(shadow('section', [html('p')], { mode: 'closed' }).innerHTML === '<p></p>');
-      assert(shadow(html('section', [html('p')])).innerHTML === '<p></p>');
-      assert(shadow(html('section', [html('p')]), { mode: 'closed' }).innerHTML === '<p></p>');
-      assert(shadow(shadow('section').host as HTMLElement));
-      assert(shadow(shadow('section', { mode: 'open' }).host as HTMLElement));
-      assert(shadow(shadow('section', { mode: 'closed' }).host as HTMLElement));
-      assert.throws(() => shadow(shadow('section', { mode: 'open' }).host as HTMLElement, { mode: 'closed' }));
-      assert.throws(() => shadow(shadow('section', { mode: 'closed' }).host as HTMLElement, { mode: 'open' }));
+      assert(shadow('section', html));
+      assert(shadow('section', '').textContent === '');
+      assert(shadow('section', [html('slot')]).innerHTML === '<slot></slot>');
+      assert(shadow('section', { mode: 'closed' }, '').textContent === '');
+      assert(shadow('section', { mode: 'closed' }, [html('slot')]).innerHTML === '<slot></slot>');
+      assert(shadow(html('section', 'a'), [html('slot')]).innerHTML === '<slot></slot>');
+      assert(shadow(html('section', 'a'), [html('slot')]).host.innerHTML === 'a');
+      assert(shadow(html('section', 'a'), { mode: 'closed' }, [html('slot')]).innerHTML === '<slot></slot>');
+      assert(shadow(html('section', 'a'), { mode: 'closed' }, [html('slot')]).host.innerHTML === 'a');
+      assert(shadow(shadow('section').host));
+      assert(shadow(shadow('section', { mode: 'open' }).host));
+      assert(shadow(shadow('section', { mode: 'closed' }).host));
+      assert.throws(() => shadow(shadow('section', { mode: 'open' }).host, { mode: 'closed' }));
+      assert.throws(() => shadow(shadow('section', { mode: 'closed' }).host, { mode: 'open' }));
     });
@@ -24,0 +28,0 @@

dom.ts

@@ -6,3 +6,3 @@ import { Symbol, document } from 'spica/global';
 declare global {
-  interface ShadowHostElementTagNameMap {
+  interface ShadowHostHTMLElementTagNameMap {
     'article': HTMLElement;
@@ -27,3 +27,3 @@ 'aside': HTMLElement;
   }
-  interface HTMLElementTagNameMap extends ShadowHostElementTagNameMap {
+  interface HTMLElementTagNameMap extends ShadowHostHTMLElementTagNameMap {
   }
@@ -48,22 +48,23 @@ }
   export const shadows = new WeakMap<Element, ShadowRoot>();
+  export const shadow = memoize((el: Element, opts: ShadowRootInit) => el.attachShadow(opts), shadows);
   export const fragment = document.createDocumentFragment();
 }
 
-export function shadow(el: keyof ShadowHostElementTagNameMap | HTMLElement, opts?: ShadowRootInit): ShadowRoot;
-export function shadow(el: keyof ShadowHostElementTagNameMap | HTMLElement, children?: Children, opts?: ShadowRootInit): ShadowRoot;
-export function shadow(el: keyof ShadowHostElementTagNameMap | HTMLElement, children?: Children | ShadowRootInit, opts?: ShadowRootInit): ShadowRoot {
-  if (typeof el === 'string') return shadow(html(el), children as Children, opts);
-  if (children && !isChildren(children)) return shadow(el, void 0, children);
-  const root = opts === void 0
-    ? el.shadowRoot ?? caches.shadows.get(el)
-    : opts.mode === 'open'
-      ? el.shadowRoot ?? void 0
-      : caches.shadows.get(el);
+export function shadow<M extends ShadowHostHTMLElementTagNameMap>(el: keyof M & string | Element, factory?: Factory<M>): ShadowRoot;
+export function shadow<M extends ShadowHostHTMLElementTagNameMap>(el: keyof M & string | Element, children?: Children, factory?: Factory<M>): ShadowRoot;
+export function shadow<M extends ShadowHostHTMLElementTagNameMap>(el: keyof M & string | Element, opts?: ShadowRootInit, factory?: Factory<M>): ShadowRoot;
+export function shadow<M extends ShadowHostHTMLElementTagNameMap>(el: keyof M & string | Element, opts?: ShadowRootInit, children?: Children, factory?: Factory<M>): ShadowRoot;
+export function shadow<M extends ShadowHostHTMLElementTagNameMap>(el: keyof M & string | Element, opts?: ShadowRootInit | Factory<M> | Children, children?: Factory<M> | Children, factory: Factory<M> = html as unknown as Factory<M>): ShadowRoot {
+  if (typeof el === 'string') return shadow(factory(el) as unknown as Element, opts as ShadowRootInit, children as Children, factory);
+  if (typeof opts === 'function') return shadow(el, void 0, children as Children, opts);
+  if (typeof children === 'function') return shadow(el, opts as ShadowRootInit, void 0, children);
+  if (isChildren(opts)) return shadow(el, void 0, opts, factory);
+  if (children !== void 0 && !isChildren(children)) return shadow(el, void 0, children, factory);
   return defineChildren(
-    !opts || opts.mode === 'open'
-      ? root ?? el.attachShadow(opts ?? { mode: 'open' })
-      : root ?? caches.shadows.set(el, el.attachShadow(opts)).get(el)!,
-    !root && children === void 0
-      ? el.childNodes
-      : children);
+    opts === void 0
+      ? el.shadowRoot ?? caches.shadows.get(el) ?? el.attachShadow(opts ?? { mode: 'open' })
+      : opts.mode === 'open'
+        ? el.shadowRoot ?? el.attachShadow(opts ?? { mode: 'open' })
+        : caches.shadows.get(el) ?? caches.shadow(el, opts),
+    children);
 }
@@ -70,0 +71,0 @@

package.json

 {
   "name": "typed-dom",
-  "version": "0.0.262",
+  "version": "0.0.263",
   "description": "A value-level and type-level DOM builder.",
@@ -5,0 +5,0 @@ "private": false,

README.md

@@ -36,2 +36,3 @@ # typed-dom
 HTML.p(() => document.createElement('p'));
+HTML.p(() => document.querySelector('p'));
 ```
@@ -76,3 +77,3 @@
 
-const Shadow = API<ShadowHostElementTagNameMap>(html, shadow);
+const Shadow = API<ShadowHostHTMLElementTagNameMap>(html, shadow);
 const HTML = API<HTMLElementTagNameMap>(html);
@@ -84,3 +85,3 @@ const SVG = API<SVGElementTagNameMap>(svg);
 
-Custom elements will be defined by extending `ShadowHostElementTagNameMap`, `HTMLElementTagNameMap`, or `SVGElementTagNameMap` interface.
+Custom elements will be defined by extending `ShadowHostHTMLElementTagNameMap`, `HTMLElementTagNameMap`, or `SVGElementTagNameMap` interface.
 
@@ -91,3 +92,3 @@ ```ts
 declare global {
-  interface ShadowHostElementTagNameMap {
+  interface ShadowHostHTMLElementTagNameMap {
     'custom-tag': HTMLElement;
@@ -112,3 +113,3 @@ }
 
-interface CustomShadowHostElementTagNameMap extends ShadowHostElementTagNameMap {
+interface CustomShadowHostElementTagNameMap extends ShadowHostHTMLElementTagNameMap {
   'custom-tag': HTMLElement;
@@ -127,8 +128,8 @@ }
 ```ts
-import { API, NS, shadow, element } from 'typed-dom';
+import { API, NS, shadow, html as h, element } from 'typed-dom';
 
-interface CustomShadowHostElementTagNameMap extends ShadowHostElementTagNameMap {
+interface ShadowHostScopedCustomHTMLElementTagNameMap extends ShadowHostHTMLElementTagNameMap {
   'custom-tag': HTMLElement;
 }
-interface CustomHTMLElementTagNameMap extends HTMLElementTagNameMap, CustomShadowHostElementTagNameMap {
+interface ScopedCustomHTMLElementTagNameMap extends HTMLElementTagNameMap, ShadowHostScopedCustomHTMLElementTagNameMap {
   'custom': HTMLElement;
@@ -138,7 +139,14 @@ }
 // Note that the following code is based on the unstandardized APIs of scoped custom elements.
-export const html = element<CustomHTMLElementTagNameMap>(
-  shadow('section', { mode: 'open', registry: ... }),
+const registry = new CustomElementRegistry();
+// This Host function creates a proxy and attaches its shadow root in the base document (light DOM).
+export const Host = API<ShadowHostHTMLElementTagNameMap>(h, el =>
+  shadow(el, { mode: 'open', registry }));
+// This html function creates a scoped custom element in a shadow DOM.
+export const html = element<ScopedCustomHTMLElementTagNameMap>(
+  shadow('body', { mode: 'open', registry }),
   NS.HTML);
-export const Shadow = API<CustomShadowHostElementTagNameMap>(html, shadow);
-export const HTML = API<CustomHTMLElementTagNameMap>(html);
+// This HTML function creates a scoped custom element proxy in a shadow DOM.
+export const HTML = API<ScopedCustomHTMLElementTagNameMap>(html);
+// This Shadow function creates a proxy and attaches its shadow root in a shadow DOM.
+export const Shadow = API<ShadowHostScopedCustomHTMLElementTagNameMap>(html, shadow);
 ```
@@ -145,0 +153,0 @@

src/builder.ts

@@ -12,26 +12,26 @@ import { Symbol } from 'spica/global';
   <M extends TagNameMap, F extends Factory<M> = Factory<M>>
-  (baseFactory: F, formatter?: <E extends Element>(el: E) => E | ShadowRoot)
+  (baseFactory: F, container?: <E extends Element>(el: E) => ShadowRoot)
   : API<M, F> {
-  return new Proxy<API<M, F>>((() => void 0) as any, handle(baseFactory, formatter));
+  return new Proxy<API<M, F>>((() => 0) as any, handle(baseFactory, container));
 }
 
-export const Shadow = API<ShadowHostElementTagNameMap>(html, shadow);
+export const Shadow = API<ShadowHostHTMLElementTagNameMap>(html, shadow);
 export const HTML = API<HTMLElementTagNameMap>(html);
 export const SVG = API<SVGElementTagNameMap>(svg);
 
-type Empty = readonly [];
 type K<M> = keyof M & string;
 type E<V> = Extract<V, Element>;
+type El_Children_Unit = readonly [];
 
 interface BuilderFunction<M extends TagNameMap, F extends Factory<M>> {
   <T extends K<M>, C extends El.Children.Void  >(tag: T,                                        factory?: El.Factory<M, F, T, C>): El<T, E<M[T]>, El.Children>;
-  <T extends K<M>, C extends Empty             >(tag: T,                           children: C, factory?: El.Factory<M, F, T, C>): El<T, E<M[T]>, El.Children.Array>;
   <T extends K<M>, C extends El.Children.Void  >(tag: T,                           children: C, factory?: El.Factory<M, F, T, C>): El<T, E<M[T]>, El.Children>;
   <T extends K<M>, C extends El.Children.Text  >(tag: T,                           children: C, factory?: El.Factory<M, F, T, C>): El<T, E<M[T]>, El.Children.Text>;
+  <T extends K<M>, C extends El_Children_Unit  >(tag: T,                           children: C, factory?: El.Factory<M, F, T, C>): El<T, E<M[T]>, El.Children.Array>;
   <T extends K<M>, C extends El.Children.Array >(tag: T,                           children: C, factory?: El.Factory<M, F, T, C>): El<T, E<M[T]>, Readonly<C>>;
   <T extends K<M>, C extends El.Children.Struct>(tag: T,                           children: C, factory?: El.Factory<M, F, T, C>): El<T, E<M[T]>, C>;
   <T extends K<M>, C extends El.Children.Void  >(tag: T, attrs: Attrs | undefined,              factory?: El.Factory<M, F, T, C>): El<T, E<M[T]>, El.Children>;
-  <T extends K<M>, C extends Empty             >(tag: T, attrs: Attrs | undefined, children: C, factory?: El.Factory<M, F, T, C>): El<T, E<M[T]>, El.Children.Array>;
   <T extends K<M>, C extends El.Children.Void  >(tag: T, attrs: Attrs | undefined, children: C, factory?: El.Factory<M, F, T, C>): El<T, E<M[T]>, El.Children>;
   <T extends K<M>, C extends El.Children.Text  >(tag: T, attrs: Attrs | undefined, children: C, factory?: El.Factory<M, F, T, C>): El<T, E<M[T]>, El.Children.Text>;
+  <T extends K<M>, C extends El_Children_Unit  >(tag: T, attrs: Attrs | undefined, children: C, factory?: El.Factory<M, F, T, C>): El<T, E<M[T]>, El.Children.Array>;
   <T extends K<M>, C extends El.Children.Array >(tag: T, attrs: Attrs | undefined, children: C, factory?: El.Factory<M, F, T, C>): El<T, E<M[T]>, Readonly<C>>;
@@ -43,11 +43,11 @@ <T extends K<M>, C extends El.Children.Struct>(tag: T, attrs: Attrs | undefined, children: C, factory?: El.Factory<M, F, T, C>): El<T, E<M[T]>, C>;
                   <C extends El.Children.Void  >(                                               factory?: El.Factory<M, F, T, C>): El<T, E<M[T]>, El.Children>;
-                  <C extends Empty             >(                                  children: C, factory?: El.Factory<M, F, T, C>): El<T, E<M[T]>, El.Children.Array>;
                   <C extends El.Children.Void  >(                                  children: C, factory?: El.Factory<M, F, T, C>): El<T, E<M[T]>, El.Children>;
                   <C extends El.Children.Text  >(                                  children: C, factory?: El.Factory<M, F, T, C>): El<T, E<M[T]>, El.Children.Text>;
+                  <C extends El_Children_Unit  >(                                  children: C, factory?: El.Factory<M, F, T, C>): El<T, E<M[T]>, El.Children.Array>;
                   <C extends El.Children.Array >(                                  children: C, factory?: El.Factory<M, F, T, C>): El<T, E<M[T]>, Readonly<C>>;
                   <C extends El.Children.Struct>(                                  children: C, factory?: El.Factory<M, F, T, C>): El<T, E<M[T]>, C>;
                   <C extends El.Children.Void  >(        attrs: Attrs | undefined,              factory?: El.Factory<M, F, T, C>): El<T, E<M[T]>, El.Children>;
-                  <C extends Empty             >(        attrs: Attrs | undefined, children: C, factory?: El.Factory<M, F, T, C>): El<T, E<M[T]>, El.Children.Array>;
                   <C extends El.Children.Void  >(        attrs: Attrs | undefined, children: C, factory?: El.Factory<M, F, T, C>): El<T, E<M[T]>, El.Children>;
                   <C extends El.Children.Text  >(        attrs: Attrs | undefined, children: C, factory?: El.Factory<M, F, T, C>): El<T, E<M[T]>, El.Children.Text>;
+                  <C extends El_Children_Unit  >(        attrs: Attrs | undefined, children: C, factory?: El.Factory<M, F, T, C>): El<T, E<M[T]>, El.Children.Array>;
                   <C extends El.Children.Array >(        attrs: Attrs | undefined, children: C, factory?: El.Factory<M, F, T, C>): El<T, E<M[T]>, Readonly<C>>;
@@ -59,3 +59,3 @@ <C extends El.Children.Struct>(        attrs: Attrs | undefined, children: C, factory?: El.Factory<M, F, T, C>): El<T, E<M[T]>, C>;
   <M extends TagNameMap, F extends Factory<M>>
-  (baseFactory: F, formatter?: <E extends Element>(el: E) => E | ShadowRoot,
+  (baseFactory: F, container?: <E extends Element>(el: E) => ShadowRoot,
 ): ProxyHandler<API<M, F>> {
@@ -79,3 +79,3 @@ return {
       const el = elem(tag, factory, attrs, children);
-      return new Elem(tag, el, attrs, children, formatter?.(el));
+      return new Elem(tag, el, attrs, children, container?.(el));
     };
@@ -82,0 +82,0 @@ }

src/util/dom.test.ts

@@ -12,12 +12,16 @@ import { shadow, frag, html, svg, text, define, defrag } from './dom';
       assert(shadow('section').childNodes.length === 0);
-      assert(shadow('section', 'a').textContent === 'a');
-      assert(shadow('section', [html('p')]).innerHTML === '<p></p>');
-      assert(shadow('section', [html('p')], { mode: 'closed' }).innerHTML === '<p></p>');
-      assert(shadow(html('section', [html('p')])).innerHTML === '<p></p>');
-      assert(shadow(html('section', [html('p')]), { mode: 'closed' }).innerHTML === '<p></p>');
-      assert(shadow(shadow('section').host as HTMLElement));
-      assert(shadow(shadow('section', { mode: 'open' }).host as HTMLElement));
-      assert(shadow(shadow('section', { mode: 'closed' }).host as HTMLElement));
-      assert.throws(() => shadow(shadow('section', { mode: 'open' }).host as HTMLElement, { mode: 'closed' }));
-      assert.throws(() => shadow(shadow('section', { mode: 'closed' }).host as HTMLElement, { mode: 'open' }));
+      assert(shadow('section', html));
+      assert(shadow('section', '').textContent === '');
+      assert(shadow('section', [html('slot')]).innerHTML === '<slot></slot>');
+      assert(shadow('section', { mode: 'closed' }, '').textContent === '');
+      assert(shadow('section', { mode: 'closed' }, [html('slot')]).innerHTML === '<slot></slot>');
+      assert(shadow(html('section', 'a'), [html('slot')]).innerHTML === '<slot></slot>');
+      assert(shadow(html('section', 'a'), [html('slot')]).host.innerHTML === 'a');
+      assert(shadow(html('section', 'a'), { mode: 'closed' }, [html('slot')]).innerHTML === '<slot></slot>');
+      assert(shadow(html('section', 'a'), { mode: 'closed' }, [html('slot')]).host.innerHTML === 'a');
+      assert(shadow(shadow('section').host));
+      assert(shadow(shadow('section', { mode: 'open' }).host));
+      assert(shadow(shadow('section', { mode: 'closed' }).host));
+      assert.throws(() => shadow(shadow('section', { mode: 'open' }).host, { mode: 'closed' }));
+      assert.throws(() => shadow(shadow('section', { mode: 'closed' }).host, { mode: 'open' }));
     });
@@ -24,0 +28,0 @@

src/util/dom.ts

@@ -6,3 +6,3 @@ import { Symbol, document } from 'spica/global';
 declare global {
-  interface ShadowHostElementTagNameMap {
+  interface ShadowHostHTMLElementTagNameMap {
     'article': HTMLElement;
@@ -27,3 +27,3 @@ 'aside': HTMLElement;
   }
-  interface HTMLElementTagNameMap extends ShadowHostElementTagNameMap {
+  interface HTMLElementTagNameMap extends ShadowHostHTMLElementTagNameMap {
   }
@@ -48,22 +48,23 @@ }
   export const shadows = new WeakMap<Element, ShadowRoot>();
+  export const shadow = memoize((el: Element, opts: ShadowRootInit) => el.attachShadow(opts), shadows);
   export const fragment = document.createDocumentFragment();
 }
 
-export function shadow(el: keyof ShadowHostElementTagNameMap | HTMLElement, opts?: ShadowRootInit): ShadowRoot;
-export function shadow(el: keyof ShadowHostElementTagNameMap | HTMLElement, children?: Children, opts?: ShadowRootInit): ShadowRoot;
-export function shadow(el: keyof ShadowHostElementTagNameMap | HTMLElement, children?: Children | ShadowRootInit, opts?: ShadowRootInit): ShadowRoot {
-  if (typeof el === 'string') return shadow(html(el), children as Children, opts);
-  if (children && !isChildren(children)) return shadow(el, void 0, children);
-  const root = opts === void 0
-    ? el.shadowRoot ?? caches.shadows.get(el)
-    : opts.mode === 'open'
-      ? el.shadowRoot ?? void 0
-      : caches.shadows.get(el);
+export function shadow<M extends ShadowHostHTMLElementTagNameMap>(el: keyof M & string | Element, factory?: Factory<M>): ShadowRoot;
+export function shadow<M extends ShadowHostHTMLElementTagNameMap>(el: keyof M & string | Element, children?: Children, factory?: Factory<M>): ShadowRoot;
+export function shadow<M extends ShadowHostHTMLElementTagNameMap>(el: keyof M & string | Element, opts?: ShadowRootInit, factory?: Factory<M>): ShadowRoot;
+export function shadow<M extends ShadowHostHTMLElementTagNameMap>(el: keyof M & string | Element, opts?: ShadowRootInit, children?: Children, factory?: Factory<M>): ShadowRoot;
+export function shadow<M extends ShadowHostHTMLElementTagNameMap>(el: keyof M & string | Element, opts?: ShadowRootInit | Factory<M> | Children, children?: Factory<M> | Children, factory: Factory<M> = html as unknown as Factory<M>): ShadowRoot {
+  if (typeof el === 'string') return shadow(factory(el) as unknown as Element, opts as ShadowRootInit, children as Children, factory);
+  if (typeof opts === 'function') return shadow(el, void 0, children as Children, opts);
+  if (typeof children === 'function') return shadow(el, opts as ShadowRootInit, void 0, children);
+  if (isChildren(opts)) return shadow(el, void 0, opts, factory);
+  if (children !== void 0 && !isChildren(children)) return shadow(el, void 0, children, factory);
   return defineChildren(
-    !opts || opts.mode === 'open'
-      ? root ?? el.attachShadow(opts ?? { mode: 'open' })
-      : root ?? caches.shadows.set(el, el.attachShadow(opts)).get(el)!,
-    !root && children === void 0
-      ? el.childNodes
-      : children);
+    opts === void 0
+      ? el.shadowRoot ?? caches.shadows.get(el) ?? el.attachShadow(opts ?? { mode: 'open' })
+      : opts.mode === 'open'
+        ? el.shadowRoot ?? el.attachShadow(opts ?? { mode: 'open' })
+        : caches.shadows.get(el) ?? caches.shadow(el, opts),
+    children);
 }
@@ -70,0 +71,0 @@

test/integration/package.ts

@@ -6,3 +6,3 @@ import { API, Shadow, HTML, SVG, El, Attrs, Factory, shadow, html } from '../..';
 declare global {
-  interface ShadowHostElementTagNameMap {
+  interface ShadowHostHTMLElementTagNameMap {
     'custom-tag': HTMLElement;
@@ -450,18 +450,14 @@ }
     it('shadow', function () {
-      assert(Shadow('section', [HTML.p()]).element.outerHTML === '<section></section>');
-      assert(Shadow.section([HTML.p()]).element.outerHTML === '<section></section>');
-      assert(Shadow.section([HTML.p()]).element.shadowRoot instanceof ShadowRoot);
-      assert(Shadow.section([HTML.p()]).element.shadowRoot!.innerHTML === '<p></p>');
-      assert(Shadow.section([HTML.p()]).children[0].element.outerHTML === '<p></p>');
-      assert(Shadow.section((h, t) => h(t, [html('p')])).element.shadowRoot!.innerHTML === '<p></p>');
-      assert(Shadow.section((h, t) => shadow(h(t, [html('p')])).host as HTMLElement).element.shadowRoot!.innerHTML === '<p></p>');
-      assert(Shadow.section((h, t) => shadow(h(t, [html('p')]), { mode: 'closed' }).host as HTMLElement).element.shadowRoot === null);
-      assert(Shadow.section([HTML.p()], (h, t) => shadow(h(t), { mode: 'closed' }).host as HTMLElement).element.shadowRoot === null);
-      assert(Shadow.section([HTML.p()], (h, t) => shadow(h(t), { mode: 'closed' }).host as HTMLElement).children[0].element.outerHTML === '<p></p>');
-      const dom = HTML.div([Shadow.section([HTML.p('a')])]);
+      assert(Shadow('section', [HTML.slot()]).element.outerHTML === '<section></section>');
+      assert(Shadow.section([HTML.slot()]).element.outerHTML === '<section></section>');
+      assert(Shadow.section([HTML.slot()]).element.shadowRoot!.innerHTML === '<slot></slot>');
+      assert(Shadow.section([HTML.slot()]).children[0].element.outerHTML === '<slot></slot>');
+      assert(Shadow.section([HTML.slot()], (h, t) => shadow(h(t), { mode: 'closed' }).host as HTMLElement).element.shadowRoot === null);
+      assert(Shadow.section([HTML.slot()], (h, t) => shadow(h(t), { mode: 'closed' }).host as HTMLElement).children[0].element.outerHTML === '<slot></slot>');
+      const dom = HTML.div([Shadow.section([HTML.slot('a')])]);
       assert(dom.element.outerHTML === '<div><section></section></div>');
-      assert(dom.children[0].children[0].element.outerHTML === '<p>a</p>');
+      assert(dom.children[0].children[0].element.outerHTML === '<slot>a</slot>');
       dom.children[0].children[0].children = 'b';
       assert(dom.element.outerHTML === '<div><section></section></div>');
-      assert(dom.element.firstElementChild!.shadowRoot!.innerHTML === '<p>b</p>');
+      assert(dom.element.firstElementChild!.shadowRoot!.innerHTML === '<slot>b</slot>');
     });
@@ -605,5 +601,7 @@
       // @ts-expect-error
+      Trans.span('Greeting', bind({}));
+      // @ts-expect-error
       Trans.span('', bind({ name: 'world' }));
       // @ts-expect-error
-      Trans.span('Greeting', bind({}));
+      Trans.span(bind({ name: 'world' }));
     });
@@ -610,0 +608,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

664664

increased by0.42%

Lines of code

15642

increased by0.09%

Number of lines in readme file

378

increased by2.16%

No dependency changes