@joist/element 4.0.0-next.2 → 4.0.0-next.3

package/README.md

@@ -11,30 +11,28 @@ npm i @joist/element
 #### Example:
 
 ```TS
-import { tagName, shadow, css, html, attr, listen, element } from '@joist/element';
+import { tagName, css, html, attr, listen, element } from '@joist/element';
 
 @element({
-  tagName: 'my-element'
+  tagName: 'my-element',
+  shadow: [
+    css`
+      :host {
+        display: block;
+        color: red;
+      }
+    `,
+    html`
+      <slot></slot>
+    `
+  ]
 })
 export class MyElement extends HTMLElement {
-  // apply styles to shadow dom
-  @shadow styles = css`
-    :host {
-      display: block;
-      color: red;
-    }
-  `;
+  @attr()
+  accessor value = 0;
 
-  // apply html to shadow dom
-  @shadow template = html`
-    <slot></slot>
-  `;
-
-  // define attributes
-  @attr() accessor value = 0;
-
-  // listen for events
-  @listen('click') onClick() {
+  @listen('click')
+  onClick() {
     console.log('clicked!')
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@joist/element",
-  "version": "4.0.0-next.2",
+  "version": "4.0.0-next.3",
   "type": "module",
   "main": "./target/lib.js",
   "module": "./target/lib.js",

package/src/lib/attr.test.ts

@@ -110,4 +110,20 @@ describe('@attr()', () => {
       'value-from-symbol'
     ]);
   });
+
+  it('should throw an error for symbols with no description', async () => {
+    expect(() => {
+      const value = Symbol();
+
+      @element({
+        tagName: 'attr-test-4'
+      })
+      class MyElement extends HTMLElement {
+        @attr()
+        accessor [value] = true;
+      }
+
+      new MyElement();
+    }).to.throw('Cannot handle Symbol property without description');
+  });
 });

package/src/lib/attr.ts

@@ -1,14 +1,22 @@
 import { metadataStore } from './metadata.js';
 
-export function attr() {
-  return <This extends HTMLElement>(
+export interface AttrOpts {
+  observe?: boolean;
+}
+
+export function attr(opts?: AttrOpts) {
+  return function attrDecorator<This extends HTMLElement>(
     { get, set }: ClassAccessorDecoratorTarget<This, unknown>,
     ctx: ClassAccessorDecoratorContext<This>
-  ): ClassAccessorDecoratorResult<This, any> => {
+  ): ClassAccessorDecoratorResult<This, any> {
     const attrName = parseAttrName(ctx.name);
     const meta = metadataStore.read(ctx.metadata);
 
-    meta.attrs.push({ propName: ctx.name, attrName });
+    meta.attrs.push({
+      propName: ctx.name,
+      attrName,
+      observe: opts?.observe ?? true
+    });
 
     return {
       set(value: unknown) {

package/src/lib/element.test.ts

@@ -1,7 +1,8 @@
-import { expect, fixture, html } from '@open-wc/testing';
+import { expect, fixture, html as litHtml } from '@open-wc/testing';
 
 import { attr } from './attr.js';
 import { element } from './element.js';
+import { css, html } from './tags.js';
 
 describe('@element()', () => {
   it('should write default value to attribute', async () => {
@@ -19,7 +20,7 @@ describe('@element()', () => {
       accessor value3 = true; // boolean
     }
 
-    const el = await fixture<MyElement>(html`<element-1></element-1>`);
+    const el = await fixture<MyElement>(litHtml`<element-1></element-1>`);
 
     expect(el.getAttribute('value1')).to.equal('hello');
     expect(el.getAttribute('value2')).to.equal('0');
@@ -39,6 +40,9 @@ describe('@element()', () => {
 
       @attr()
       accessor value3 = true; // boolean
+
+      @attr({ observe: false }) // should be filtered out
+      accessor value4 = 'hello world';
     }
 
     expect(Reflect.get(MyElement, 'observedAttributes')).to.deep.equal([
@@ -47,4 +51,36 @@ describe('@element()', () => {
       'value3'
     ]);
   });
+
+  it('should attach shadow root when the shadow property exists', async () => {
+    @element({
+      tagName: 'element-3',
+      shadow: []
+    })
+    class MyElement extends HTMLElement {}
+
+    const el = new MyElement();
+
+    expect(el.shadowRoot).to.be.instanceOf(ShadowRoot);
+  });
+
+  it('should apply html and css', async () => {
+    @element({
+      tagName: 'element-4',
+      shadow: [
+        css`
+          :host {
+            display: contents;
+          }
+        `,
+        html`<slot></slot>`
+      ]
+    })
+    class MyElement extends HTMLElement {}
+
+    const el = new MyElement();
+
+    expect(el.shadowRoot!.adoptedStyleSheets.length).to.equal(1);
+    expect(el.shadowRoot!.innerHTML).to.equal(`<slot></slot>`);
+  });
 });

package/src/lib/element.ts

@@ -1,14 +1,16 @@
-import { metadataStore } from './metadata.js';
+import { AttrDef, metadataStore } from './metadata.js';
+import { ShadowResult } from './result.js';
 
-export interface ElementOpts {
+export interface ElementOpts<T> {
   tagName?: string;
+  shadow?: Array<ShadowResult | ((el: T) => void)>;
 }
 
-export function element(opts?: ElementOpts) {
-  return <Target extends CustomElementConstructor>(
-    Base: Target,
-    ctx: ClassDecoratorContext<Target>
-  ) => {
+export function element<
+  Target extends CustomElementConstructor,
+  Instance extends InstanceType<Target>
+>(opts?: ElementOpts<Instance>) {
+  return function elementDecorator(Base: Target, ctx: ClassDecoratorContext<Target>) {
     const meta = metadataStore.read(ctx.metadata);
 
     ctx.addInitializer(function (this: Target) {
@@ -20,37 +22,33 @@ export function element(opts?: ElementOpts) {
     });
 
     return class JoistElement extends Base {
-      // make all attrs observable
-      static observedAttributes = meta.attrs.map(({ attrName }) => attrName);
+      static observedAttributes = meta.attrs
+        .filter(({ observe }) => observe) // filter out attributes that are not to be observed
+        .map(({ attrName }) => attrName);
 
       constructor(...args: any[]) {
         super(...args);
 
-        const root = this.shadowRoot || this;
+        if (opts?.shadow) {
+          this.attachShadow({ mode: 'open' });
 
-        for (let [event, listener] of meta.listeners) {
-          root.addEventListener(event, listener.bind(this));
-        }
-      }
-
-      connectedCallback() {
-        for (let { propName, attrName } of meta.attrs) {
-          const value = Reflect.get(this, propName);
-
-          // reflect values back to attributes
-          if (value !== null && value !== undefined && value !== '') {
-            if (typeof value === 'boolean') {
-              if (value === true) {
-                // set boolean attribute
-                this.setAttribute(attrName, '');
-              }
+          for (let res of opts.shadow) {
+            if (typeof res === 'function') {
+              res(this as unknown as Instance);
             } else {
-              // set key/value attribute
-              this.setAttribute(attrName, String(value));
+              res.run(this);
             }
           }
         }
 
+        for (let [event, { cb, root }] of meta.listeners) {
+          root(this).addEventListener(event, cb.bind(this));
+        }
+      }
+
+      connectedCallback() {
+        reflectAttributeValues(this, meta.attrs);
+
         if (super.connectedCallback) {
           super.connectedCallback();
         }
@@ -58,3 +56,22 @@ export function element(opts?: ElementOpts) {
     };
   };
 }
+
+function reflectAttributeValues(el: HTMLElement, attrs: AttrDef[]) {
+  for (let { propName, attrName } of attrs) {
+    const value = Reflect.get(el, propName);
+
+    // reflect values back to attributes
+    if (value !== null && value !== undefined && value !== '') {
+      if (typeof value === 'boolean') {
+        if (value === true) {
+          // set boolean attribute
+          el.setAttribute(attrName, '');
+        }
+      } else {
+        // set key/value attribute
+        el.setAttribute(attrName, String(value));
+      }
+    }
+  }
+}

package/src/lib/listen.ts

@@ -1,9 +1,15 @@
-import { metadataStore } from './metadata.js';
+import { ListenerRootSelector, metadataStore } from './metadata.js';
 
-export function listen<This extends HTMLElement>(event: string) {
-  return (value: (e: Event) => void, ctx: ClassMethodDecoratorContext<This>) => {
+export function listen<This extends HTMLElement>(event: string, root?: ListenerRootSelector) {
+  return function listenDecorator(
+    value: (e: Event) => void,
+    ctx: ClassMethodDecoratorContext<This>
+  ) {
     const metadata = metadataStore.read(ctx.metadata);
 
-    metadata.listeners.set(event, value);
+    metadata.listeners.set(event, {
+      cb: value,
+      root: root ?? ((el: HTMLElement) => el.shadowRoot ?? el)
+    });
   };
 }

package/src/lib/metadata.ts

@@ -3,11 +3,14 @@
 export interface AttrDef {
   propName: string | symbol;
   attrName: string;
+  observe: boolean;
 }
 
+export type ListenerRootSelector = (el: HTMLElement) => HTMLElement | ShadowRoot;
+
 export class ElementMetadata {
   attrs: AttrDef[] = [];
-  listeners = new Map<string, (e: Event) => void>();
+  listeners = new Map<string, { cb: (e: Event) => void; root: ListenerRootSelector }>();
 }
 
 export class MetadataStore extends WeakMap<object, ElementMetadata> {

package/src/lib/result.ts

@@ -1,27 +1,23 @@
-export abstract class ShadowResult {
-  strings: TemplateStringsArray;
-  values: any[];
-
-  #shadow: ShadowRoot | undefined = undefined;
-
-  get shadow() {
-    if (!this.#shadow) {
-      throw new Error('ShadowResult has not been applied');
-    }
+export interface ShadowResult {
+  run(el: HTMLElement): void;
+}
 
-    return this.#shadow;
-  }
+export abstract class JoistShadowResult implements ShadowResult {
+  strings;
+  values;
 
   constructor(raw: TemplateStringsArray, ...values: any[]) {
     this.strings = raw;
     this.values = values;
   }
 
-  execute(root: ShadowRoot) {
-    this.#shadow = root;
+  run(el: HTMLElement) {
+    if (!el.shadowRoot) {
+      throw new Error('ShadowResult has not been applied');
+    }
 
-    this.apply(root);
+    this.setup(el.shadowRoot);
   }
 
-  abstract apply(root: ShadowRoot): void;
+  abstract setup(root: ShadowRoot): void;
 }

package/src/lib/tags.ts

@@ -1,57 +1,9 @@
-/**
- * NOTE: TemplateStringsArray can be used to cache via a WeakMap.
- *
- * function html(strs: TemplateStringsArray) {
- *   return strs
- * }
- *
- * class Foo {
- *   hello = html`world`;
- * }
- *
- * // these will be the same instance of TemplateStringsArray
- * new Foo().hello === new Foo().hello
- */
+import { JoistShadowResult } from './result.js';
 
-import { ShadowResult } from './result.js';
-
-type Tags = keyof HTMLElementTagNameMap;
-type SVGTags = keyof SVGElementTagNameMap;
-type MathTags = keyof MathMLElementTagNameMap;
-
-export const htmlTemplateCache = new WeakMap<TemplateStringsArray, HTMLTemplateElement>();
-
-export class HTMLResult extends ShadowResult {
-  query<K extends Tags>(selectors: K): HTMLElementTagNameMap[K] | null;
-  query<K extends SVGTags>(selectors: K): SVGElementTagNameMap[K] | null;
-  query<K extends MathTags>(selectors: K): MathMLElementTagNameMap[K] | null;
-  query<E extends Element = Element>(selectors: string): E | null;
-  query<K extends Tags>(query: K) {
-    return this.shadow.querySelector<K>(query);
-  }
-
-  queryAll<K extends Tags>(selectors: K): NodeListOf<HTMLElementTagNameMap[K]>;
-  queryAll<K extends SVGTags>(selectors: K): NodeListOf<SVGElementTagNameMap[K]>;
-  queryAll<K extends MathTags>(selectors: K): NodeListOf<MathMLElementTagNameMap[K]>;
-  queryAll<E extends Element = Element>(selectors: string): NodeListOf<E>;
-  queryAll<K extends Tags>(query: K) {
-    return this.shadow.querySelectorAll<K>(query);
-  }
-
-  /**
-   * THe HTMLTemplateElement itself will be cached but a new instance of the result returned
-   */
-  apply(root: ShadowRoot): void {
-    let template: HTMLTemplateElement;
-
-    if (htmlTemplateCache.has(this.strings)) {
-      template = htmlTemplateCache.get(this.strings) as HTMLTemplateElement;
-    } else {
-      template = document.createElement('template');
-
-      template.innerHTML = concat(this.strings);
-      htmlTemplateCache.set(this.strings, template);
-    }
+export class HTMLResult extends JoistShadowResult {
+  setup(root: ShadowRoot): void {
+    let template = document.createElement('template');
+    template.innerHTML = concat(this.strings);
 
     root.append(template.content.cloneNode(true));
   }
@@ -61,19 +13,10 @@ export function html(strings: TemplateStringsArray, ...values: any[]): HTMLResul
   return new HTMLResult(strings, ...values);
 }
 
-export const styleSheetCache = new WeakMap<TemplateStringsArray, CSSStyleSheet>();
-
-export class CSSResult extends ShadowResult {
-  apply(root: ShadowRoot): void {
-    let sheet: CSSStyleSheet;
-
-    if (styleSheetCache.has(this.strings)) {
-      sheet = styleSheetCache.get(this.strings) as CSSStyleSheet;
-    } else {
-      sheet = new CSSStyleSheet();
-
-      sheet.replaceSync(concat(this.strings));
-    }
+export class CSSResult extends JoistShadowResult {
+  setup(root: ShadowRoot): void {
+    let sheet = new CSSStyleSheet();
+    sheet.replaceSync(concat(this.strings));
 
     root.adoptedStyleSheets = [...root.adoptedStyleSheets, sheet];
   }

package/src/lib.ts

@@ -1,6 +1,5 @@
-export { ShadowResult as TemplateResult } from './lib/result.js';
+export { JoistShadowResult as TemplateResult } from './lib/result.js';
 export { css, html, HTMLResult, CSSResult } from './lib/tags.js';
-export { shadow } from './lib/shadow.js';
 export { attr } from './lib/attr.js';
 export { listen } from './lib/listen.js';
 export { element } from './lib/element.js';

package/target/lib/attr.d.ts

@@ -1 +1,4 @@
-export declare function attr(): <This extends HTMLElement>({ get, set }: ClassAccessorDecoratorTarget<This, unknown>, ctx: ClassAccessorDecoratorContext<This>) => ClassAccessorDecoratorResult<This, any>;
+export interface AttrOpts {
+    observe?: boolean;
+}
+export declare function attr(opts?: AttrOpts): <This extends HTMLElement>({ get, set }: ClassAccessorDecoratorTarget<This, unknown>, ctx: ClassAccessorDecoratorContext<This>) => ClassAccessorDecoratorResult<This, any>;

package/target/lib/attr.js

@@ -1,9 +1,13 @@
 import { metadataStore } from './metadata.js';
-export function attr() {
-    return ({ get, set }, ctx) => {
+export function attr(opts) {
+    return function attrDecorator({ get, set }, ctx) {
         const attrName = parseAttrName(ctx.name);
         const meta = metadataStore.read(ctx.metadata);
-        meta.attrs.push({ propName: ctx.name, attrName });
+        meta.attrs.push({
+            propName: ctx.name,
+            attrName,
+            observe: opts?.observe ?? true
+        });
         return {
             set(value) {
                 if (value === true) {

package/target/lib/attr.js.map

@@ -1 +1 @@
-{"version":3,"file":"attr.js","sourceRoot":"","sources":["../../src/lib/attr.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAE9C,MAAM,UAAU,IAAI;IAClB,OAAO,CACL,EAAE,GAAG,EAAE,GAAG,EAA+C,EACzD,GAAwC,EACC,EAAE;QAC3C,MAAM,QAAQ,GAAG,aAAa,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;QACzC,MAAM,IAAI,GAAG,aAAa,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;QAE9C,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,QAAQ,EAAE,GAAG,CAAC,IAAI,EAAE,QAAQ,EAAE,CAAC,CAAC;QAElD,OAAO;YACL,GAAG,CAAC,KAAc;gBAChB,IAAI,KAAK,KAAK,IAAI,EAAE,CAAC;oBACnB,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;gBAClC,CAAC;qBAAM,IAAI,KAAK,KAAK,KAAK,EAAE,CAAC;oBAC3B,IAAI,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAC;gBACjC,CAAC;qBAAM,CAAC;oBACN,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;gBAC7C,CAAC;gBAED,GAAG,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;YACxB,CAAC;YACD,GAAG;gBACD,MAAM,OAAO,GAAG,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;gBAC/B,MAAM,IAAI,GAAG,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;gBAEzC,IAAI,IAAI,KAAK,IAAI,EAAE,CAAC;oBAElB,IAAI,IAAI,KAAK,EAAE,EAAE,CAAC;wBAChB,OAAO,IAAI,CAAC;oBACd,CAAC;oBAGD,IAAI,OAAO,OAAO,KAAK,QAAQ,EAAE,CAAC;wBAChC,OAAO,MAAM,CAAC,IAAI,CAAC,CAAC;oBACtB,CAAC;oBAGD,OAAO,IAAI,CAAC;gBACd,CAAC;gBAGD,OAAO,OAAO,CAAC;YACjB,CAAC;SACF,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC;AAED,SAAS,aAAa,CAAC,GAAoB;IACzC,IAAI,KAAa,CAAC;IAElB,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE,CAAC;QAC5B,IAAI,GAAG,CAAC,WAAW,EAAE,CAAC;YACpB,KAAK,GAAG,GAAG,CAAC,WAAW,CAAC;QAC1B,CAAC;aAAM,CAAC;YACN,MAAM,IAAI,KAAK,CAAC,mDAAmD,CAAC,CAAC;QACvE,CAAC;IACH,CAAC;SAAM,CAAC;QACN,KAAK,GAAG,GAAG,CAAC;IACd,CAAC;IAED,OAAO,KAAK,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;AAClD,CAAC"}
+{"version":3,"file":"attr.js","sourceRoot":"","sources":["../../src/lib/attr.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAM9C,MAAM,UAAU,IAAI,CAAC,IAAe;IAClC,OAAO,SAAS,aAAa,CAC3B,EAAE,GAAG,EAAE,GAAG,EAA+C,EACzD,GAAwC;QAExC,MAAM,QAAQ,GAAG,aAAa,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;QACzC,MAAM,IAAI,GAAG,aAAa,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;QAE9C,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC;YACd,QAAQ,EAAE,GAAG,CAAC,IAAI;YAClB,QAAQ;YACR,OAAO,EAAE,IAAI,EAAE,OAAO,IAAI,IAAI;SAC/B,CAAC,CAAC;QAEH,OAAO;YACL,GAAG,CAAC,KAAc;gBAChB,IAAI,KAAK,KAAK,IAAI,EAAE,CAAC;oBACnB,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;gBAClC,CAAC;qBAAM,IAAI,KAAK,KAAK,KAAK,EAAE,CAAC;oBAC3B,IAAI,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAC;gBACjC,CAAC;qBAAM,CAAC;oBACN,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;gBAC7C,CAAC;gBAED,GAAG,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;YACxB,CAAC;YACD,GAAG;gBACD,MAAM,OAAO,GAAG,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;gBAC/B,MAAM,IAAI,GAAG,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;gBAEzC,IAAI,IAAI,KAAK,IAAI,EAAE,CAAC;oBAElB,IAAI,IAAI,KAAK,EAAE,EAAE,CAAC;wBAChB,OAAO,IAAI,CAAC;oBACd,CAAC;oBAGD,IAAI,OAAO,OAAO,KAAK,QAAQ,EAAE,CAAC;wBAChC,OAAO,MAAM,CAAC,IAAI,CAAC,CAAC;oBACtB,CAAC;oBAGD,OAAO,IAAI,CAAC;gBACd,CAAC;gBAGD,OAAO,OAAO,CAAC;YACjB,CAAC;SACF,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC;AAED,SAAS,aAAa,CAAC,GAAoB;IACzC,IAAI,KAAa,CAAC;IAElB,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE,CAAC;QAC5B,IAAI,GAAG,CAAC,WAAW,EAAE,CAAC;YACpB,KAAK,GAAG,GAAG,CAAC,WAAW,CAAC;QAC1B,CAAC;aAAM,CAAC;YACN,MAAM,IAAI,KAAK,CAAC,mDAAmD,CAAC,CAAC;QACvE,CAAC;IACH,CAAC;SAAM,CAAC;QACN,KAAK,GAAG,GAAG,CAAC;IACd,CAAC;IAED,OAAO,KAAK,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;AAClD,CAAC"}

package/target/lib/attr.test.js

@@ -242,5 +242,43 @@ describe('@attr()', () => {
             'value-from-symbol'
         ]);
     });
+    it('should throw an error for symbols with no description', async () => {
+        expect(() => {
+            const value = Symbol();
+            let MyElement = (() => {
+                var _a;
+                let _classDecorators = [element({
+                        tagName: 'attr-test-4'
+                    })];
+                let _classDescriptor;
+                let _classExtraInitializers = [];
+                let _classThis;
+                let _classSuper = HTMLElement;
+                let _member_decorators;
+                let _member_initializers = [];
+                let _member_extraInitializers = [];
+                var MyElement = class extends _classSuper {
+                    static { _classThis = this; }
+                    static {
+                        const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+                        __esDecorate(this, null, _member_decorators, { kind: "accessor", name: _a, static: false, private: false, access: { has: obj => _a in obj, get: obj => obj[_a], set: (obj, value) => { obj[_a] = value; } }, metadata: _metadata }, _member_initializers, _member_extraInitializers);
+                        __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+                        MyElement = _classThis = _classDescriptor.value;
+                        if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+                        __runInitializers(_classThis, _classExtraInitializers);
+                    }
+                    #_a_accessor_storage = __runInitializers(this, _member_initializers, true);
+                    get [(_member_decorators = [attr()], _a = __propKey(value))]() { return this.#_a_accessor_storage; }
+                    set [_a](value) { this.#_a_accessor_storage = value; }
+                    constructor() {
+                        super(...arguments);
+                        __runInitializers(this, _member_extraInitializers);
+                    }
+                };
+                return MyElement = _classThis;
+            })();
+            new MyElement();
+        }).to.throw('Cannot handle Symbol property without description');
+    });
 });
 //# sourceMappingURL=attr.test.js.map

package/target/lib/attr.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"attr.test.js","sourceRoot":"","sources":["../../src/lib/attr.test.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"attr.test.js","sourceRoot":"","sources":["../../src/lib/attr.test.ts"],"names":[],"mappings":"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"}

package/target/lib/element.d.ts

@@ -1,7 +1,9 @@
-export interface ElementOpts {
+import { ShadowResult } from './result.js';
+export interface ElementOpts<T> {
     tagName?: string;
+    shadow?: Array<ShadowResult | ((el: T) => void)>;
 }
-export declare function element(opts?: ElementOpts): <Target extends CustomElementConstructor>(Base: Target, ctx: ClassDecoratorContext<Target>) => {
+export declare function element<Target extends CustomElementConstructor, Instance extends InstanceType<Target>>(opts?: ElementOpts<Instance>): (Base: Target, ctx: ClassDecoratorContext<Target>) => {
     new (...args: any[]): {
         connectedCallback(): void;
         accessKey: string;

package/target/lib/element.js

@@ -1,6 +1,6 @@
 import { metadataStore } from './metadata.js';
 export function element(opts) {
-    return (Base, ctx) => {
+    return function elementDecorator(Base, ctx) {
         const meta = metadataStore.read(ctx.metadata);
         ctx.addInitializer(function () {
             if (opts?.tagName) {
@@ -10,28 +10,28 @@ export function element(opts) {
             }
         });
         return class JoistElement extends Base {
-            static observedAttributes = meta.attrs.map(({ attrName }) => attrName);
+            static observedAttributes = meta.attrs
+                .filter(({ observe }) => observe)
+                .map(({ attrName }) => attrName);
             constructor(...args) {
                 super(...args);
-                const root = this.shadowRoot || this;
-                for (let [event, listener] of meta.listeners) {
-                    root.addEventListener(event, listener.bind(this));
-                }
-            }
-            connectedCallback() {
-                for (let { propName, attrName } of meta.attrs) {
-                    const value = Reflect.get(this, propName);
-                    if (value !== null && value !== undefined && value !== '') {
-                        if (typeof value === 'boolean') {
-                            if (value === true) {
-                                this.setAttribute(attrName, '');
-                            }
+                if (opts?.shadow) {
+                    this.attachShadow({ mode: 'open' });
+                    for (let res of opts.shadow) {
+                        if (typeof res === 'function') {
+                            res(this);
                         }
                         else {
-                            this.setAttribute(attrName, String(value));
+                            res.run(this);
                         }
                     }
                 }
+                for (let [event, { cb, root }] of meta.listeners) {
+                    root(this).addEventListener(event, cb.bind(this));
+                }
+            }
+            connectedCallback() {
+                reflectAttributeValues(this, meta.attrs);
                 if (super.connectedCallback) {
                     super.connectedCallback();
                 }
@@ -39,4 +39,19 @@ export function element(opts) {
         };
     };
 }
+function reflectAttributeValues(el, attrs) {
+    for (let { propName, attrName } of attrs) {
+        const value = Reflect.get(el, propName);
+        if (value !== null && value !== undefined && value !== '') {
+            if (typeof value === 'boolean') {
+                if (value === true) {
+                    el.setAttribute(attrName, '');
+                }
+            }
+            else {
+                el.setAttribute(attrName, String(value));
+            }
+        }
+    }
+}
 //# sourceMappingURL=element.js.map

package/target/lib/element.js.map

@@ -1 +1 @@
-{"version":3,"file":"element.js","sourceRoot":"","sources":["../../src/lib/element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAM9C,MAAM,UAAU,OAAO,CAAC,IAAkB;IACxC,OAAO,CACL,IAAY,EACZ,GAAkC,EAClC,EAAE;QACF,MAAM,IAAI,GAAG,aAAa,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;QAE9C,GAAG,CAAC,cAAc,CAAC;YACjB,IAAI,IAAI,EAAE,OAAO,EAAE,CAAC;gBAClB,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC;oBACtC,cAAc,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;gBAC5C,CAAC;YACH,CAAC;QACH,CAAC,CAAC,CAAC;QAEH,OAAO,MAAM,YAAa,SAAQ,IAAI;YAEpC,MAAM,CAAC,kBAAkB,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,QAAQ,CAAC,CAAC;YAEvE,YAAY,GAAG,IAAW;gBACxB,KAAK,CAAC,GAAG,IAAI,CAAC,CAAC;gBAEf,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC;gBAErC,KAAK,IAAI,CAAC,KAAK,EAAE,QAAQ,CAAC,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;oBAC7C,IAAI,CAAC,gBAAgB,CAAC,KAAK,EAAE,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;gBACpD,CAAC;YACH,CAAC;YAED,iBAAiB;gBACf,KAAK,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;oBAC9C,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;oBAG1C,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,EAAE,EAAE,CAAC;wBAC1D,IAAI,OAAO,KAAK,KAAK,SAAS,EAAE,CAAC;4BAC/B,IAAI,KAAK,KAAK,IAAI,EAAE,CAAC;gCAEnB,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;4BAClC,CAAC;wBACH,CAAC;6BAAM,CAAC;4BAEN,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;wBAC7C,CAAC;oBACH,CAAC;gBACH,CAAC;gBAED,IAAI,KAAK,CAAC,iBAAiB,EAAE,CAAC;oBAC5B,KAAK,CAAC,iBAAiB,EAAE,CAAC;gBAC5B,CAAC;YACH,CAAC;SACF,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC"}
+{"version":3,"file":"element.js","sourceRoot":"","sources":["../../src/lib/element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAW,aAAa,EAAE,MAAM,eAAe,CAAC;AAQvD,MAAM,UAAU,OAAO,CAGrB,IAA4B;IAC5B,OAAO,SAAS,gBAAgB,CAAC,IAAY,EAAE,GAAkC;QAC/E,MAAM,IAAI,GAAG,aAAa,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;QAE9C,GAAG,CAAC,cAAc,CAAC;YACjB,IAAI,IAAI,EAAE,OAAO,EAAE,CAAC;gBAClB,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC;oBACtC,cAAc,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;gBAC5C,CAAC;YACH,CAAC;QACH,CAAC,CAAC,CAAC;QAEH,OAAO,MAAM,YAAa,SAAQ,IAAI;YACpC,MAAM,CAAC,kBAAkB,GAAG,IAAI,CAAC,KAAK;iBACnC,MAAM,CAAC,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,OAAO,CAAC;iBAChC,GAAG,CAAC,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,QAAQ,CAAC,CAAC;YAEnC,YAAY,GAAG,IAAW;gBACxB,KAAK,CAAC,GAAG,IAAI,CAAC,CAAC;gBAEf,IAAI,IAAI,EAAE,MAAM,EAAE,CAAC;oBACjB,IAAI,CAAC,YAAY,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC;oBAEpC,KAAK,IAAI,GAAG,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;wBAC5B,IAAI,OAAO,GAAG,KAAK,UAAU,EAAE,CAAC;4BAC9B,GAAG,CAAC,IAA2B,CAAC,CAAC;wBACnC,CAAC;6BAAM,CAAC;4BACN,GAAG,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;wBAChB,CAAC;oBACH,CAAC;gBACH,CAAC;gBAED,KAAK,IAAI,CAAC,KAAK,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,CAAC,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;oBACjD,IAAI,CAAC,IAAI,CAAC,CAAC,gBAAgB,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;gBACpD,CAAC;YACH,CAAC;YAED,iBAAiB;gBACf,sBAAsB,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;gBAEzC,IAAI,KAAK,CAAC,iBAAiB,EAAE,CAAC;oBAC5B,KAAK,CAAC,iBAAiB,EAAE,CAAC;gBAC5B,CAAC;YACH,CAAC;SACF,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC;AAED,SAAS,sBAAsB,CAAC,EAAe,EAAE,KAAgB;IAC/D,KAAK,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,KAAK,EAAE,CAAC;QACzC,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,CAAC,EAAE,EAAE,QAAQ,CAAC,CAAC;QAGxC,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,EAAE,EAAE,CAAC;YAC1D,IAAI,OAAO,KAAK,KAAK,SAAS,EAAE,CAAC;gBAC/B,IAAI,KAAK,KAAK,IAAI,EAAE,CAAC;oBAEnB,EAAE,CAAC,YAAY,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;gBAChC,CAAC;YACH,CAAC;iBAAM,CAAC;gBAEN,EAAE,CAAC,YAAY,CAAC,QAAQ,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;YAC3C,CAAC;QACH,CAAC;IACH,CAAC;AACH,CAAC"}

package/target/lib/element.test.js

@@ -1,7 +1,8 @@
 import { __esDecorate, __runInitializers } from "tslib";
-import { expect, fixture, html } from '@open-wc/testing';
+import { expect, fixture, html as litHtml } from '@open-wc/testing';
 import { attr } from './attr.js';
 import { element } from './element.js';
+import { css, html } from './tags.js';
 describe('@element()', () => {
     it('should write default value to attribute', async () => {
         let MyElement = (() => {
@@ -52,7 +53,7 @@ describe('@element()', () => {
             };
             return MyElement = _classThis;
         })();
-        const el = await fixture(html `<element-1></element-1>`);
+        const el = await fixture(litHtml `<element-1></element-1>`);
         expect(el.getAttribute('value1')).to.equal('hello');
         expect(el.getAttribute('value2')).to.equal('0');
         expect(el.getAttribute('value3')).to.equal('');
@@ -75,6 +76,9 @@ describe('@element()', () => {
             let _value3_decorators;
             let _value3_initializers = [];
             let _value3_extraInitializers = [];
+            let _value4_decorators;
+            let _value4_initializers = [];
+            let _value4_extraInitializers = [];
             var MyElement = class extends _classSuper {
                 static { _classThis = this; }
                 static {
@@ -82,9 +86,11 @@ describe('@element()', () => {
                     _value1_decorators = [attr()];
                     _value2_decorators = [attr()];
                     _value3_decorators = [attr()];
+                    _value4_decorators = [attr({ observe: false })];
                     __esDecorate(this, null, _value1_decorators, { kind: "accessor", name: "value1", static: false, private: false, access: { has: obj => "value1" in obj, get: obj => obj.value1, set: (obj, value) => { obj.value1 = value; } }, metadata: _metadata }, _value1_initializers, _value1_extraInitializers);
                     __esDecorate(this, null, _value2_decorators, { kind: "accessor", name: "value2", static: false, private: false, access: { has: obj => "value2" in obj, get: obj => obj.value2, set: (obj, value) => { obj.value2 = value; } }, metadata: _metadata }, _value2_initializers, _value2_extraInitializers);
                     __esDecorate(this, null, _value3_decorators, { kind: "accessor", name: "value3", static: false, private: false, access: { has: obj => "value3" in obj, get: obj => obj.value3, set: (obj, value) => { obj.value3 = value; } }, metadata: _metadata }, _value3_initializers, _value3_extraInitializers);
+                    __esDecorate(this, null, _value4_decorators, { kind: "accessor", name: "value4", static: false, private: false, access: { has: obj => "value4" in obj, get: obj => obj.value4, set: (obj, value) => { obj.value4 = value; } }, metadata: _metadata }, _value4_initializers, _value4_extraInitializers);
                     __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
                     MyElement = _classThis = _classDescriptor.value;
                     if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
@@ -99,9 +105,12 @@ describe('@element()', () => {
                 #value3_accessor_storage = (__runInitializers(this, _value2_extraInitializers), __runInitializers(this, _value3_initializers, true));
                 get value3() { return this.#value3_accessor_storage; }
                 set value3(value) { this.#value3_accessor_storage = value; }
+                #value4_accessor_storage = (__runInitializers(this, _value3_extraInitializers), __runInitializers(this, _value4_initializers, 'hello world'));
+                get value4() { return this.#value4_accessor_storage; }
+                set value4(value) { this.#value4_accessor_storage = value; }
                 constructor() {
                     super(...arguments);
-                    __runInitializers(this, _value3_extraInitializers);
+                    __runInitializers(this, _value4_extraInitializers);
                 }
             };
             return MyElement = _classThis;
@@ -112,5 +121,63 @@ describe('@element()', () => {
             'value3'
         ]);
     });
+    it('should attach shadow root when the shadow property exists', async () => {
+        let MyElement = (() => {
+            let _classDecorators = [element({
+                    tagName: 'element-3',
+                    shadow: []
+                })];
+            let _classDescriptor;
+            let _classExtraInitializers = [];
+            let _classThis;
+            let _classSuper = HTMLElement;
+            var MyElement = class extends _classSuper {
+                static { _classThis = this; }
+                static {
+                    const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+                    __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+                    MyElement = _classThis = _classDescriptor.value;
+                    if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+                    __runInitializers(_classThis, _classExtraInitializers);
+                }
+            };
+            return MyElement = _classThis;
+        })();
+        const el = new MyElement();
+        expect(el.shadowRoot).to.be.instanceOf(ShadowRoot);
+    });
+    it('should apply html and css', async () => {
+        let MyElement = (() => {
+            let _classDecorators = [element({
+                    tagName: 'element-4',
+                    shadow: [
+                        css `
+          :host {
+            display: contents;
+          }
+        `,
+                        html `<slot></slot>`
+                    ]
+                })];
+            let _classDescriptor;
+            let _classExtraInitializers = [];
+            let _classThis;
+            let _classSuper = HTMLElement;
+            var MyElement = class extends _classSuper {
+                static { _classThis = this; }
+                static {
+                    const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+                    __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+                    MyElement = _classThis = _classDescriptor.value;
+                    if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+                    __runInitializers(_classThis, _classExtraInitializers);
+                }
+            };
+            return MyElement = _classThis;
+        })();
+        const el = new MyElement();
+        expect(el.shadowRoot.adoptedStyleSheets.length).to.equal(1);
+        expect(el.shadowRoot.innerHTML).to.equal(`<slot></slot>`);
+    });
 });
 //# sourceMappingURL=element.test.js.map

package/target/lib/element.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"element.test.js","sourceRoot":"","sources":["../../src/lib/element.test.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAEzD,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AACjC,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEvC,QAAQ,CAAC,YAAY,EAAE,GAAG,EAAE;IAC1B,EAAE,CAAC,yCAAyC,EAAE,KAAK,IAAI,EAAE;YAIjD,SAAS;oCAHd,OAAO,CAAC;oBACP,OAAO,EAAE,WAAW;iBACrB,CAAC;;;;8BACsB,WAAW;;;;;;;;;;iCAAnB,SAAQ,WAAW;;;;0CAChC,IAAI,EAAE;0CAGN,IAAI,EAAE;0CAGN,IAAI,EAAE;oBALP,uKAAS,MAAM,6BAAN,MAAM,uFAAW;oBAG1B,uKAAS,MAAM,6BAAN,MAAM,uFAAK;oBAGpB,uKAAS,MAAM,6BAAN,MAAM,uFAAQ;oBARzB,6KASC;;;oBATK,uDAAS;;gBAEb,yEAAkB,OAAO,EAAC;gBAA1B,IAAS,MAAM,4CAAW;gBAA1B,IAAS,MAAM,kDAAW;gBAG1B,8HAAkB,CAAC,GAAC;gBAApB,IAAS,MAAM,4CAAK;gBAApB,IAAS,MAAM,kDAAK;gBAGpB,8HAAkB,IAAI,GAAC;gBAAvB,IAAS,MAAM,4CAAQ;gBAAvB,IAAS,MAAM,kDAAQ;;;;;;;;QAGzB,MAAM,EAAE,GAAG,MAAM,OAAO,CAAY,IAAI,CAAA,yBAAyB,CAAC,CAAC;QAEnE,MAAM,CAAC,EAAE,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;QACpD,MAAM,CAAC,EAAE,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QAChD,MAAM,CAAC,EAAE,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;IACjD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,4BAA4B,EAAE,KAAK,IAAI,EAAE;YAIpC,SAAS;oCAHd,OAAO,CAAC;oBACP,OAAO,EAAE,WAAW;iBACrB,CAAC;;;;8BACsB,WAAW;;;;;;;;;;iCAAnB,SAAQ,WAAW;;;;0CAChC,IAAI,EAAE;0CAGN,IAAI,EAAE;0CAGN,IAAI,EAAE;oBALP,uKAAS,MAAM,6BAAN,MAAM,uFAAW;oBAG1B,uKAAS,MAAM,6BAAN,MAAM,uFAAK;oBAGpB,uKAAS,MAAM,6BAAN,MAAM,uFAAQ;oBARzB,6KASC;;;oBATK,uDAAS;;gBAEb,yEAAkB,OAAO,EAAC;gBAA1B,IAAS,MAAM,4CAAW;gBAA1B,IAAS,MAAM,kDAAW;gBAG1B,8HAAkB,CAAC,GAAC;gBAApB,IAAS,MAAM,4CAAK;gBAApB,IAAS,MAAM,kDAAK;gBAGpB,8HAAkB,IAAI,GAAC;gBAAvB,IAAS,MAAM,4CAAQ;gBAAvB,IAAS,MAAM,kDAAQ;;;;;;;;QAGzB,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,SAAS,EAAE,oBAAoB,CAAC,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC;YACjE,QAAQ;YACR,QAAQ;YACR,QAAQ;SACT,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}
+{"version":3,"file":"element.test.js","sourceRoot":"","sources":["../../src/lib/element.test.ts"],"names":[],"mappings":"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"}

package/target/lib/listen.d.ts

@@ -1 +1,2 @@
-export declare function listen<This extends HTMLElement>(event: string): (value: (e: Event) => void, ctx: ClassMethodDecoratorContext<This>) => void;
+import { ListenerRootSelector } from './metadata.js';
+export declare function listen<This extends HTMLElement>(event: string, root?: ListenerRootSelector): (value: (e: Event) => void, ctx: ClassMethodDecoratorContext<This>) => void;

package/target/lib/listen.js

@@ -1,8 +1,11 @@
 import { metadataStore } from './metadata.js';
-export function listen(event) {
-    return (value, ctx) => {
+export function listen(event, root) {
+    return function listenDecorator(value, ctx) {
         const metadata = metadataStore.read(ctx.metadata);
-        metadata.listeners.set(event, value);
+        metadata.listeners.set(event, {
+            cb: value,
+            root: root ?? ((el) => el.shadowRoot ?? el)
+        });
     };
 }
 //# sourceMappingURL=listen.js.map

package/target/lib/listen.js.map

@@ -1 +1 @@
-{"version":3,"file":"listen.js","sourceRoot":"","sources":["../../src/lib/listen.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAE9C,MAAM,UAAU,MAAM,CAA2B,KAAa;IAC5D,OAAO,CAAC,KAAyB,EAAE,GAAsC,EAAE,EAAE;QAC3E,MAAM,QAAQ,GAAG,aAAa,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;QAElD,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;IACvC,CAAC,CAAC;AACJ,CAAC"}
+{"version":3,"file":"listen.js","sourceRoot":"","sources":["../../src/lib/listen.ts"],"names":[],"mappings":"AAAA,OAAO,EAAwB,aAAa,EAAE,MAAM,eAAe,CAAC;AAEpE,MAAM,UAAU,MAAM,CAA2B,KAAa,EAAE,IAA2B;IACzF,OAAO,SAAS,eAAe,CAC7B,KAAyB,EACzB,GAAsC;QAEtC,MAAM,QAAQ,GAAG,aAAa,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;QAElD,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,EAAE;YAC5B,EAAE,EAAE,KAAK;YACT,IAAI,EAAE,IAAI,IAAI,CAAC,CAAC,EAAe,EAAE,EAAE,CAAC,EAAE,CAAC,UAAU,IAAI,EAAE,CAAC;SACzD,CAAC,CAAC;IACL,CAAC,CAAC;AACJ,CAAC"}

package/target/lib/metadata.d.ts

@@ -1,10 +1,15 @@
 export interface AttrDef {
     propName: string | symbol;
     attrName: string;
+    observe: boolean;
 }
+export type ListenerRootSelector = (el: HTMLElement) => HTMLElement | ShadowRoot;
 export declare class ElementMetadata {
     attrs: AttrDef[];
-    listeners: Map<string, (e: Event) => void>;
+    listeners: Map<string, {
+        cb: (e: Event) => void;
+        root: ListenerRootSelector;
+    }>;
 }
 export declare class MetadataStore extends WeakMap<object, ElementMetadata> {
     read(value: object): ElementMetadata;

package/target/lib/metadata.js.map

@@ -1 +1 @@
-{"version":3,"file":"metadata.js","sourceRoot":"","sources":["../../src/lib/metadata.ts"],"names":[],"mappings":"AAAC,MAAc,CAAC,QAAQ,KAAK,MAAM,CAAC,iBAAiB,CAAC,CAAC;AAOvD,MAAM,OAAO,eAAe;IAC1B,KAAK,GAAc,EAAE,CAAC;IACtB,SAAS,GAAG,IAAI,GAAG,EAA8B,CAAC;CACnD;AAED,MAAM,OAAO,aAAc,SAAQ,OAAgC;IACjE,IAAI,CAAC,KAAa;QAChB,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC;YACrB,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,IAAI,eAAe,EAAE,CAAC,CAAC;QACzC,CAAC;QAED,OAAO,IAAI,CAAC,GAAG,CAAC,KAAK,CAAE,CAAC;IAC1B,CAAC;CACF;AAED,MAAM,CAAC,MAAM,aAAa,GAAG,IAAI,aAAa,EAAE,CAAC"}
+{"version":3,"file":"metadata.js","sourceRoot":"","sources":["../../src/lib/metadata.ts"],"names":[],"mappings":"AAAC,MAAc,CAAC,QAAQ,KAAK,MAAM,CAAC,iBAAiB,CAAC,CAAC;AAUvD,MAAM,OAAO,eAAe;IAC1B,KAAK,GAAc,EAAE,CAAC;IACtB,SAAS,GAAG,IAAI,GAAG,EAAkE,CAAC;CACvF;AAED,MAAM,OAAO,aAAc,SAAQ,OAAgC;IACjE,IAAI,CAAC,KAAa;QAChB,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC;YACrB,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,IAAI,eAAe,EAAE,CAAC,CAAC;QACzC,CAAC;QAED,OAAO,IAAI,CAAC,GAAG,CAAC,KAAK,CAAE,CAAC;IAC1B,CAAC;CACF;AAED,MAAM,CAAC,MAAM,aAAa,GAAG,IAAI,aAAa,EAAE,CAAC"}

package/target/lib/result.d.ts

@@ -1,9 +1,12 @@
-export declare abstract class ShadowResult {
+export interface ShadowResult {
+    run(el: HTMLElement): void;
+}
+export declare abstract class JoistShadowResult implements ShadowResult {
     #private;
     strings: TemplateStringsArray;
     values: any[];
     get shadow(): ShadowRoot;
     constructor(raw: TemplateStringsArray, ...values: any[]);
-    execute(root: ShadowRoot): void;
-    abstract apply(root: ShadowRoot): void;
+    run(el: HTMLElement): void;
+    abstract setup(root: ShadowRoot): void;
 }

package/target/lib/result.js

@@ -1,4 +1,4 @@
-export class ShadowResult {
+export class JoistShadowResult {
     strings;
     values;
     #shadow = undefined;
@@ -12,9 +12,12 @@ export class ShadowResult {
         this.strings = raw;
         this.values = values;
     }
-    execute(root) {
-        this.#shadow = root;
-        this.apply(root);
+    run(el) {
+        if (!el.shadowRoot) {
+            throw new Error('ShadowResult has not been applied');
+        }
+        this.#shadow = el.shadowRoot;
+        this.setup(this.#shadow);
     }
 }
 //# sourceMappingURL=result.js.map

package/target/lib/result.js.map

@@ -1 +1 @@
-{"version":3,"file":"result.js","sourceRoot":"","sources":["../../src/lib/result.ts"],"names":[],"mappings":"AAAA,MAAM,OAAgB,YAAY;IAChC,OAAO,CAAuB;IAC9B,MAAM,CAAQ;IAEd,OAAO,GAA2B,SAAS,CAAC;IAE5C,IAAI,MAAM;QACR,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;YAClB,MAAM,IAAI,KAAK,CAAC,mCAAmC,CAAC,CAAC;QACvD,CAAC;QAED,OAAO,IAAI,CAAC,OAAO,CAAC;IACtB,CAAC;IAED,YAAY,GAAyB,EAAE,GAAG,MAAa;QACrD,IAAI,CAAC,OAAO,GAAG,GAAG,CAAC;QACnB,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;IACvB,CAAC;IAED,OAAO,CAAC,IAAgB;QACtB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;QAEpB,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;IACnB,CAAC;CAGF"}
+{"version":3,"file":"result.js","sourceRoot":"","sources":["../../src/lib/result.ts"],"names":[],"mappings":"AAIA,MAAM,OAAgB,iBAAiB;IACrC,OAAO,CAAC;IACR,MAAM,CAAC;IAEP,OAAO,GAA2B,SAAS,CAAC;IAE5C,IAAI,MAAM;QACR,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;YAClB,MAAM,IAAI,KAAK,CAAC,mCAAmC,CAAC,CAAC;QACvD,CAAC;QAED,OAAO,IAAI,CAAC,OAAO,CAAC;IACtB,CAAC;IAED,YAAY,GAAyB,EAAE,GAAG,MAAa;QACrD,IAAI,CAAC,OAAO,GAAG,GAAG,CAAC;QACnB,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;IACvB,CAAC;IAED,GAAG,CAAC,EAAe;QACjB,IAAI,CAAC,EAAE,CAAC,UAAU,EAAE,CAAC;YACnB,MAAM,IAAI,KAAK,CAAC,mCAAmC,CAAC,CAAC;QACvD,CAAC;QAED,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC,UAAU,CAAC;QAE7B,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAC3B,CAAC;CAGF"}

package/target/lib/tags.d.ts

@@ -1,23 +1,11 @@
-import { ShadowResult } from './result.js';
-type Tags = keyof HTMLElementTagNameMap;
-type SVGTags = keyof SVGElementTagNameMap;
-type MathTags = keyof MathMLElementTagNameMap;
+import { JoistShadowResult } from './result.js';
 export declare const htmlTemplateCache: WeakMap<TemplateStringsArray, HTMLTemplateElement>;
-export declare class HTMLResult extends ShadowResult {
-    query<K extends Tags>(selectors: K): HTMLElementTagNameMap[K] | null;
-    query<K extends SVGTags>(selectors: K): SVGElementTagNameMap[K] | null;
-    query<K extends MathTags>(selectors: K): MathMLElementTagNameMap[K] | null;
-    query<E extends Element = Element>(selectors: string): E | null;
-    queryAll<K extends Tags>(selectors: K): NodeListOf<HTMLElementTagNameMap[K]>;
-    queryAll<K extends SVGTags>(selectors: K): NodeListOf<SVGElementTagNameMap[K]>;
-    queryAll<K extends MathTags>(selectors: K): NodeListOf<MathMLElementTagNameMap[K]>;
-    queryAll<E extends Element = Element>(selectors: string): NodeListOf<E>;
-    apply(root: ShadowRoot): void;
+export declare class HTMLResult extends JoistShadowResult {
+    setup(root: ShadowRoot): void;
 }
 export declare function html(strings: TemplateStringsArray, ...values: any[]): HTMLResult;
 export declare const styleSheetCache: WeakMap<TemplateStringsArray, CSSStyleSheet>;
-export declare class CSSResult extends ShadowResult {
-    apply(root: ShadowRoot): void;
+export declare class CSSResult extends JoistShadowResult {
+    setup(root: ShadowRoot): void;
 }
 export declare function css(strings: TemplateStringsArray): CSSResult;
-export {};

package/target/lib/tags.js

@@ -1,13 +1,7 @@
-import { ShadowResult } from './result.js';
+import { JoistShadowResult } from './result.js';
 export const htmlTemplateCache = new WeakMap();
-export class HTMLResult extends ShadowResult {
-    query(query) {
-        return this.shadow.querySelector(query);
-    }
-    queryAll(query) {
-        return this.shadow.querySelectorAll(query);
-    }
-    apply(root) {
+export class HTMLResult extends JoistShadowResult {
+    setup(root) {
         let template;
         if (htmlTemplateCache.has(this.strings)) {
             template = htmlTemplateCache.get(this.strings);
@@ -24,8 +18,8 @@ export function html(strings, ...values) {
     return new HTMLResult(strings, ...values);
 }
 export const styleSheetCache = new WeakMap();
-export class CSSResult extends ShadowResult {
-    apply(root) {
+export class CSSResult extends JoistShadowResult {
+    setup(root) {
         let sheet;
         if (styleSheetCache.has(this.strings)) {
             sheet = styleSheetCache.get(this.strings);

package/target/lib/tags.js.map

@@ -1 +1 @@
-{"version":3,"file":"tags.js","sourceRoot":"","sources":["../../src/lib/tags.ts"],"names":[],"mappings":"AAeA,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAM3C,MAAM,CAAC,MAAM,iBAAiB,GAAG,IAAI,OAAO,EAA6C,CAAC;AAE1F,MAAM,OAAO,UAAW,SAAQ,YAAY;IAK1C,KAAK,CAAiB,KAAQ;QAC5B,OAAO,IAAI,CAAC,MAAM,CAAC,aAAa,CAAI,KAAK,CAAC,CAAC;IAC7C,CAAC;IAMD,QAAQ,CAAiB,KAAQ;QAC/B,OAAO,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAI,KAAK,CAAC,CAAC;IAChD,CAAC;IAKD,KAAK,CAAC,IAAgB;QACpB,IAAI,QAA6B,CAAC;QAElC,IAAI,iBAAiB,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC;YACxC,QAAQ,GAAG,iBAAiB,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,CAAwB,CAAC;QACxE,CAAC;aAAM,CAAC;YACN,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;YAE9C,QAAQ,CAAC,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;YAC1C,iBAAiB,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC;QAChD,CAAC;QAED,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC;IAChD,CAAC;CACF;AAED,MAAM,UAAU,IAAI,CAAC,OAA6B,EAAE,GAAG,MAAa;IAClE,OAAO,IAAI,UAAU,CAAC,OAAO,EAAE,GAAG,MAAM,CAAC,CAAC;AAC5C,CAAC;AAED,MAAM,CAAC,MAAM,eAAe,GAAG,IAAI,OAAO,EAAuC,CAAC;AAElF,MAAM,OAAO,SAAU,SAAQ,YAAY;IACzC,KAAK,CAAC,IAAgB;QACpB,IAAI,KAAoB,CAAC;QAEzB,IAAI,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC;YACtC,KAAK,GAAG,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,CAAkB,CAAC;QAC7D,CAAC;aAAM,CAAC;YACN,KAAK,GAAG,IAAI,aAAa,EAAE,CAAC;YAE5B,KAAK,CAAC,WAAW,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC;QAC1C,CAAC;QAED,IAAI,CAAC,kBAAkB,GAAG,CAAC,GAAG,IAAI,CAAC,kBAAkB,EAAE,KAAK,CAAC,CAAC;IAChE,CAAC;CACF;AAED,MAAM,UAAU,GAAG,CAAC,OAA6B;IAC/C,OAAO,IAAI,SAAS,CAAC,OAAO,CAAC,CAAC;AAChC,CAAC;AAED,SAAS,MAAM,CAAC,OAA6B;IAC3C,IAAI,GAAG,GAAG,EAAE,CAAC;IAEb,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,OAAO,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;QACxC,GAAG,IAAI,OAAO,CAAC,CAAC,CAAC,CAAC;IACpB,CAAC;IAED,OAAO,GAAG,CAAC;AACb,CAAC"}
+{"version":3,"file":"tags.js","sourceRoot":"","sources":["../../src/lib/tags.ts"],"names":[],"mappings":"AAeA,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAEhD,MAAM,CAAC,MAAM,iBAAiB,GAAG,IAAI,OAAO,EAA6C,CAAC;AAE1F,MAAM,OAAO,UAAW,SAAQ,iBAAiB;IAC/C,KAAK,CAAC,IAAgB;QACpB,IAAI,QAA6B,CAAC;QAElC,IAAI,iBAAiB,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC;YACxC,QAAQ,GAAG,iBAAiB,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,CAAwB,CAAC;QACxE,CAAC;aAAM,CAAC;YACN,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;YAE9C,QAAQ,CAAC,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;YAC1C,iBAAiB,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC;QAChD,CAAC;QAED,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC;IAChD,CAAC;CACF;AAED,MAAM,UAAU,IAAI,CAAC,OAA6B,EAAE,GAAG,MAAa;IAClE,OAAO,IAAI,UAAU,CAAC,OAAO,EAAE,GAAG,MAAM,CAAC,CAAC;AAC5C,CAAC;AAED,MAAM,CAAC,MAAM,eAAe,GAAG,IAAI,OAAO,EAAuC,CAAC;AAElF,MAAM,OAAO,SAAU,SAAQ,iBAAiB;IAC9C,KAAK,CAAC,IAAgB;QACpB,IAAI,KAAoB,CAAC;QAEzB,IAAI,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC;YACtC,KAAK,GAAG,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,CAAkB,CAAC;QAC7D,CAAC;aAAM,CAAC;YACN,KAAK,GAAG,IAAI,aAAa,EAAE,CAAC;YAE5B,KAAK,CAAC,WAAW,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC;QAC1C,CAAC;QAED,IAAI,CAAC,kBAAkB,GAAG,CAAC,GAAG,IAAI,CAAC,kBAAkB,EAAE,KAAK,CAAC,CAAC;IAChE,CAAC;CACF;AAED,MAAM,UAAU,GAAG,CAAC,OAA6B;IAC/C,OAAO,IAAI,SAAS,CAAC,OAAO,CAAC,CAAC;AAChC,CAAC;AAED,SAAS,MAAM,CAAC,OAA6B;IAC3C,IAAI,GAAG,GAAG,EAAE,CAAC;IAEb,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,OAAO,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;QACxC,GAAG,IAAI,OAAO,CAAC,CAAC,CAAC,CAAC;IACpB,CAAC;IAED,OAAO,GAAG,CAAC;AACb,CAAC"}

package/target/lib.d.ts

@@ -1,6 +1,5 @@
-export { ShadowResult as TemplateResult } from './lib/result.js';
+export { JoistShadowResult as TemplateResult } from './lib/result.js';
 export { css, html, HTMLResult, CSSResult } from './lib/tags.js';
-export { shadow } from './lib/shadow.js';
 export { attr } from './lib/attr.js';
 export { listen } from './lib/listen.js';
 export { element } from './lib/element.js';

package/target/lib.js

@@ -1,6 +1,5 @@
-export { ShadowResult as TemplateResult } from './lib/result.js';
+export { JoistShadowResult as TemplateResult } from './lib/result.js';
 export { css, html, HTMLResult, CSSResult } from './lib/tags.js';
-export { shadow } from './lib/shadow.js';
 export { attr } from './lib/attr.js';
 export { listen } from './lib/listen.js';
 export { element } from './lib/element.js';

package/target/lib.js.map

@@ -1 +1 @@
-{"version":3,"file":"lib.js","sourceRoot":"","sources":["../src/lib.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,IAAI,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACjE,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AACjE,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACrC,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC"}
+{"version":3,"file":"lib.js","sourceRoot":"","sources":["../src/lib.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,IAAI,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACtE,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AACjE,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACrC,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC"}

package/src/lib/shadow.test.ts

@@ -1,40 +0,0 @@
-import { expect } from '@open-wc/testing';
-
-import { css, html } from './tags.js';
-import { shadow } from './shadow.js';
-
-describe('template', () => {
-  it('should apply a stylesheet', () => {
-    class MyElement extends HTMLElement {
-      @shadow styles = css`
-        :host {
-          display: flex;
-        }
-      `;
-    }
-
-    customElements.define('template-1', MyElement);
-
-    const el = new MyElement();
-
-    expect(el.shadowRoot!.adoptedStyleSheets.length).to.eq(1);
-  });
-
-  it('should apply html', () => {
-    class MyElement extends HTMLElement {
-      @shadow styles = css`
-        :host {
-          display: flex;
-        }
-      `;
-
-      @shadow template = html`<slot></slot>`;
-    }
-
-    customElements.define('template-2', MyElement);
-
-    const el = new MyElement();
-
-    expect(el.shadowRoot?.innerHTML).to.eq('<slot></slot>');
-  });
-});

package/src/lib/shadow.ts

@@ -1,16 +0,0 @@
-import { ShadowResult } from './result.js';
-
-export function shadow<This extends HTMLElement, T extends ShadowResult>(
-  _: undefined,
-  _ctx: ClassFieldDecoratorContext<This, T>
-) {
-  return function (this: This, result: T) {
-    if (!this.shadowRoot) {
-      this.attachShadow({ mode: 'open' });
-    }
-
-    result.execute(this.shadowRoot!);
-
-    return result;
-  };
-}

package/target/lib/shadow.d.ts

@@ -1,2 +0,0 @@
-import { ShadowResult } from './result.js';
-export declare function shadow<This extends HTMLElement, T extends ShadowResult>(_: undefined, _ctx: ClassFieldDecoratorContext<This, T>): (this: This, result: T) => T;

package/target/lib/shadow.js

@@ -1,10 +0,0 @@
-export function shadow(_, _ctx) {
-    return function (result) {
-        if (!this.shadowRoot) {
-            this.attachShadow({ mode: 'open' });
-        }
-        result.execute(this.shadowRoot);
-        return result;
-    };
-}
-//# sourceMappingURL=shadow.js.map

package/target/lib/shadow.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"shadow.js","sourceRoot":"","sources":["../../src/lib/shadow.ts"],"names":[],"mappings":"AAEA,MAAM,UAAU,MAAM,CACpB,CAAY,EACZ,IAAyC;IAEzC,OAAO,UAAsB,MAAS;QACpC,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC;YACrB,IAAI,CAAC,YAAY,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC;QACtC,CAAC;QAED,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,UAAW,CAAC,CAAC;QAEjC,OAAO,MAAM,CAAC;IAChB,CAAC,CAAC;AACJ,CAAC"}

package/target/lib/shadow.test.d.ts

@@ -1 +0,0 @@
-export {};

package/target/lib/shadow.test.js

@@ -1,69 +0,0 @@
-import { __esDecorate, __runInitializers } from "tslib";
-import { expect } from '@open-wc/testing';
-import { css, html } from './tags.js';
-import { shadow } from './shadow.js';
-describe('template', () => {
-    it('should apply a stylesheet', () => {
-        let MyElement = (() => {
-            let _classSuper = HTMLElement;
-            let _styles_decorators;
-            let _styles_initializers = [];
-            let _styles_extraInitializers = [];
-            return class MyElement extends _classSuper {
-                static {
-                    const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
-                    _styles_decorators = [shadow];
-                    __esDecorate(null, null, _styles_decorators, { kind: "field", name: "styles", static: false, private: false, access: { has: obj => "styles" in obj, get: obj => obj.styles, set: (obj, value) => { obj.styles = value; } }, metadata: _metadata }, _styles_initializers, _styles_extraInitializers);
-                    if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
-                }
-                styles = __runInitializers(this, _styles_initializers, css `
-        :host {
-          display: flex;
-        }
-      `);
-                constructor() {
-                    super(...arguments);
-                    __runInitializers(this, _styles_extraInitializers);
-                }
-            };
-        })();
-        customElements.define('template-1', MyElement);
-        const el = new MyElement();
-        expect(el.shadowRoot.adoptedStyleSheets.length).to.eq(1);
-    });
-    it('should apply html', () => {
-        let MyElement = (() => {
-            let _classSuper = HTMLElement;
-            let _styles_decorators;
-            let _styles_initializers = [];
-            let _styles_extraInitializers = [];
-            let _template_decorators;
-            let _template_initializers = [];
-            let _template_extraInitializers = [];
-            return class MyElement extends _classSuper {
-                static {
-                    const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
-                    _styles_decorators = [shadow];
-                    _template_decorators = [shadow];
-                    __esDecorate(null, null, _styles_decorators, { kind: "field", name: "styles", static: false, private: false, access: { has: obj => "styles" in obj, get: obj => obj.styles, set: (obj, value) => { obj.styles = value; } }, metadata: _metadata }, _styles_initializers, _styles_extraInitializers);
-                    __esDecorate(null, null, _template_decorators, { kind: "field", name: "template", static: false, private: false, access: { has: obj => "template" in obj, get: obj => obj.template, set: (obj, value) => { obj.template = value; } }, metadata: _metadata }, _template_initializers, _template_extraInitializers);
-                    if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
-                }
-                styles = __runInitializers(this, _styles_initializers, css `
-        :host {
-          display: flex;
-        }
-      `);
-                template = (__runInitializers(this, _styles_extraInitializers), __runInitializers(this, _template_initializers, html `<slot></slot>`));
-                constructor() {
-                    super(...arguments);
-                    __runInitializers(this, _template_extraInitializers);
-                }
-            };
-        })();
-        customElements.define('template-2', MyElement);
-        const el = new MyElement();
-        expect(el.shadowRoot?.innerHTML).to.eq('<slot></slot>');
-    });
-});
-//# sourceMappingURL=shadow.test.js.map

package/target/lib/shadow.test.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"shadow.test.js","sourceRoot":"","sources":["../../src/lib/shadow.test.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE1C,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AACtC,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,QAAQ,CAAC,UAAU,EAAE,GAAG,EAAE;IACxB,EAAE,CAAC,2BAA2B,EAAE,GAAG,EAAE;YAC7B,SAAS;8BAAS,WAAW;;;;yBAA7B,SAAU,SAAQ,WAAW;;;0CAChC,MAAM;oBAAC,oKAAA,MAAM,6BAAN,MAAM,uFAIZ;;;gBAJM,MAAM,iDAAG,GAAG,CAAA;;;;OAInB,EAAC;;;;;;;QAGJ,cAAc,CAAC,MAAM,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC;QAE/C,MAAM,EAAE,GAAG,IAAI,SAAS,EAAE,CAAC;QAE3B,MAAM,CAAC,EAAE,CAAC,UAAW,CAAC,kBAAkB,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;IAC5D,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,mBAAmB,EAAE,GAAG,EAAE;YACrB,SAAS;8BAAS,WAAW;;;;;;;yBAA7B,SAAU,SAAQ,WAAW;;;0CAChC,MAAM;4CAMN,MAAM;oBANC,oKAAA,MAAM,6BAAN,MAAM,uFAIZ;oBAEM,0KAAA,QAAQ,6BAAR,QAAQ,2FAAuB;;;gBAN/B,MAAM,iDAAG,GAAG,CAAA;;;;OAInB,EAAC;gBAEM,QAAQ,wGAAG,IAAI,CAAA,eAAe,GAAC;;;;;;;QAGzC,cAAc,CAAC,MAAM,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC;QAE/C,MAAM,EAAE,GAAG,IAAI,SAAS,EAAE,CAAC;QAE3B,MAAM,CAAC,EAAE,CAAC,UAAU,EAAE,SAAS,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC;IAC1D,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}