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

package/target/lib/element.js

@@ -16,24 +16,31 @@ export function element(opts) {
             constructor(...args) {
                 super(...args);
                 if (opts?.shadow) {
-                    this.attachShadow({ mode: 'open' });
+                    if (!this.shadowRoot) {
+                        this.attachShadow({ mode: 'open' });
+                    }
                     for (let res of opts.shadow) {
                         if (typeof res === 'function') {
                             res(this);
                         }
                         else {
-                            res.run(this);
+                            res.apply(this);
                         }
                     }
                 }
                 for (let [event, { cb, root }] of meta.listeners) {
                     root(this).addEventListener(event, cb.bind(this));
                 }
+                for (let cb of meta.onReady) {
+                    cb.call(this);
+                }
             }
             connectedCallback() {
-                reflectAttributeValues(this, meta.attrs);
-                if (super.connectedCallback) {
-                    super.connectedCallback();
+                if (this.isConnected) {
+                    reflectAttributeValues(this, meta.attrs);
+                    if (super.connectedCallback) {
+                        super.connectedCallback();
+                    }
                 }
             }
         };

package/target/lib/element.js.map

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

package/target/lib/element.test.js

@@ -1,183 +1,191 @@
 import { __esDecorate, __runInitializers } from "tslib";
-import { expect, fixture, html as litHtml } from '@open-wc/testing';
+import { expect } from 'chai';
 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 = (() => {
-            let _classDecorators = [element({
-                    tagName: 'element-1'
-                })];
-            let _classDescriptor;
-            let _classExtraInitializers = [];
-            let _classThis;
-            let _classSuper = HTMLElement;
-            let _value1_decorators;
-            let _value1_initializers = [];
-            let _value1_extraInitializers = [];
-            let _value2_decorators;
-            let _value2_initializers = [];
-            let _value2_extraInitializers = [];
-            let _value3_decorators;
-            let _value3_initializers = [];
-            let _value3_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;
-                    _value1_decorators = [attr()];
-                    _value2_decorators = [attr()];
-                    _value3_decorators = [attr()];
-                    __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(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);
-                }
-                #value1_accessor_storage = __runInitializers(this, _value1_initializers, 'hello');
-                get value1() { return this.#value1_accessor_storage; }
-                set value1(value) { this.#value1_accessor_storage = value; }
-                #value2_accessor_storage = (__runInitializers(this, _value1_extraInitializers), __runInitializers(this, _value2_initializers, 0));
-                get value2() { return this.#value2_accessor_storage; }
-                set value2(value) { this.#value2_accessor_storage = value; }
-                #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; }
-                constructor() {
-                    super(...arguments);
-                    __runInitializers(this, _value3_extraInitializers);
-                }
-            };
-            return MyElement = _classThis;
-        })();
-        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('');
-    });
-    it('should register attributes', async () => {
-        let MyElement = (() => {
-            let _classDecorators = [element({
-                    tagName: 'element-2'
-                })];
-            let _classDescriptor;
-            let _classExtraInitializers = [];
-            let _classThis;
-            let _classSuper = HTMLElement;
-            let _value1_decorators;
-            let _value1_initializers = [];
-            let _value1_extraInitializers = [];
-            let _value2_decorators;
-            let _value2_initializers = [];
-            let _value2_extraInitializers = [];
-            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 {
-                    const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
-                    _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 });
-                    __runInitializers(_classThis, _classExtraInitializers);
-                }
-                #value1_accessor_storage = __runInitializers(this, _value1_initializers, 'hello');
-                get value1() { return this.#value1_accessor_storage; }
-                set value1(value) { this.#value1_accessor_storage = value; }
-                #value2_accessor_storage = (__runInitializers(this, _value1_extraInitializers), __runInitializers(this, _value2_initializers, 0));
-                get value2() { return this.#value2_accessor_storage; }
-                set value2(value) { this.#value2_accessor_storage = value; }
-                #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, _value4_extraInitializers);
-                }
-            };
-            return MyElement = _classThis;
-        })();
-        expect(Reflect.get(MyElement, 'observedAttributes')).to.deep.equal([
-            'value1',
-            'value2',
-            '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>`);
-    });
+it('should write default value to attribute', async () => {
+    let MyElement = (() => {
+        let _classDecorators = [element({
+                tagName: 'element-1'
+            })];
+        let _classDescriptor;
+        let _classExtraInitializers = [];
+        let _classThis;
+        let _classSuper = HTMLElement;
+        let _value1_decorators;
+        let _value1_initializers = [];
+        let _value1_extraInitializers = [];
+        let _value2_decorators;
+        let _value2_initializers = [];
+        let _value2_extraInitializers = [];
+        let _value3_decorators;
+        let _value3_initializers = [];
+        let _value3_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;
+                _value1_decorators = [attr()];
+                _value2_decorators = [attr()];
+                _value3_decorators = [attr()];
+                __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(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);
+            }
+            #value1_accessor_storage = __runInitializers(this, _value1_initializers, 'hello');
+            get value1() { return this.#value1_accessor_storage; }
+            set value1(value) { this.#value1_accessor_storage = value; }
+            #value2_accessor_storage = (__runInitializers(this, _value1_extraInitializers), __runInitializers(this, _value2_initializers, 0));
+            get value2() { return this.#value2_accessor_storage; }
+            set value2(value) { this.#value2_accessor_storage = value; }
+            #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; }
+            constructor() {
+                super(...arguments);
+                __runInitializers(this, _value3_extraInitializers);
+            }
+        };
+        return MyElement = _classThis;
+    })();
+    const el = new MyElement();
+    document.body.append(el);
+    expect(el.getAttribute('value1')).to.equal('hello');
+    expect(el.getAttribute('value2')).to.equal('0');
+    expect(el.getAttribute('value3')).to.equal('');
+    el.remove();
+});
+it('should register attributes', async () => {
+    let MyElement = (() => {
+        let _classDecorators = [element({
+                tagName: 'element-2'
+            })];
+        let _classDescriptor;
+        let _classExtraInitializers = [];
+        let _classThis;
+        let _classSuper = HTMLElement;
+        let _value1_decorators;
+        let _value1_initializers = [];
+        let _value1_extraInitializers = [];
+        let _value2_decorators;
+        let _value2_initializers = [];
+        let _value2_extraInitializers = [];
+        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 {
+                const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+                _value1_decorators = [attr()];
+                _value2_decorators = [attr()];
+                _value3_decorators = [attr()];
+                _value4_decorators = [attr({ observed: 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 });
+                __runInitializers(_classThis, _classExtraInitializers);
+            }
+            #value1_accessor_storage = __runInitializers(this, _value1_initializers, 'hello');
+            get value1() { return this.#value1_accessor_storage; }
+            set value1(value) { this.#value1_accessor_storage = value; }
+            #value2_accessor_storage = (__runInitializers(this, _value1_extraInitializers), __runInitializers(this, _value2_initializers, 0));
+            get value2() { return this.#value2_accessor_storage; }
+            set value2(value) { this.#value2_accessor_storage = value; }
+            #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, _value4_extraInitializers);
+            }
+        };
+        return MyElement = _classThis;
+    })();
+    expect(Reflect.get(MyElement, 'observedAttributes')).to.deep.equal([
+        'value1',
+        'value2',
+        '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>`,
+                    {
+                        apply(el) {
+                            const div = document.createElement('div');
+                            div.innerHTML = 'hello world';
+                            el.append(div);
+                        }
+                    }
+                ]
+            })];
+        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>`);
+    expect(el.innerHTML).to.equal(`<div>hello world</div>`);
 });
 //# 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":"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"}
+{"version":3,"file":"element.test.js","sourceRoot":"","sources":["../../src/lib/element.test.ts"],"names":[],"mappings":"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"}

package/target/lib/lifecycle.d.ts

@@ -0,0 +1 @@
+export declare function ready(): (val: Function, ctx: ClassMethodDecoratorContext) => void;

package/target/lib/lifecycle.js

@@ -0,0 +1,8 @@
+import { metadataStore } from './metadata.js';
+export function ready() {
+    return function readyDecorator(val, ctx) {
+        const metadata = metadataStore.read(ctx.metadata);
+        metadata.onReady.add(val);
+    };
+}
+//# sourceMappingURL=lifecycle.js.map

package/target/lib/lifecycle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"lifecycle.js","sourceRoot":"","sources":["../../src/lib/lifecycle.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAE9C,MAAM,UAAU,KAAK;IACnB,OAAO,SAAS,cAAc,CAAC,GAAa,EAAE,GAAgC;QAC5E,MAAM,QAAQ,GAAG,aAAa,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;QAElD,QAAQ,CAAC,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAC5B,CAAC,CAAC;AACJ,CAAC"}

package/target/lib/lifecycle.test.js

@@ -0,0 +1,48 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { assert } from 'chai';
+import { element } from './element.js';
+import { ready } from './lifecycle';
+it('should call all callbacks when template is ready', () => {
+    let MyElement = (() => {
+        let _classDecorators = [element({
+                tagName: 'template-ready-1'
+            })];
+        let _classDescriptor;
+        let _classExtraInitializers = [];
+        let _classThis;
+        let _classSuper = HTMLElement;
+        let _instanceExtraInitializers = [];
+        let _onTemplateReady1_decorators;
+        let _onTemplateReady2_decorators;
+        var MyElement = class extends _classSuper {
+            static { _classThis = this; }
+            static {
+                const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+                _onTemplateReady1_decorators = [ready()];
+                _onTemplateReady2_decorators = [ready()];
+                __esDecorate(this, null, _onTemplateReady1_decorators, { kind: "method", name: "onTemplateReady1", static: false, private: false, access: { has: obj => "onTemplateReady1" in obj, get: obj => obj.onTemplateReady1 }, metadata: _metadata }, null, _instanceExtraInitializers);
+                __esDecorate(this, null, _onTemplateReady2_decorators, { kind: "method", name: "onTemplateReady2", static: false, private: false, access: { has: obj => "onTemplateReady2" in obj, get: obj => obj.onTemplateReady2 }, metadata: _metadata }, null, _instanceExtraInitializers);
+                __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);
+            }
+            callCount = (__runInitializers(this, _instanceExtraInitializers), {});
+            onTemplateReady1() {
+                this.callCount['onTemplateReady1'] ??= 0;
+                this.callCount['onTemplateReady1']++;
+            }
+            onTemplateReady2() {
+                this.callCount['onTemplateReady2'] ??= 0;
+                this.callCount['onTemplateReady2']++;
+            }
+        };
+        return MyElement = _classThis;
+    })();
+    const el = new MyElement();
+    assert.deepEqual(el.callCount, {
+        onTemplateReady1: 1,
+        onTemplateReady2: 1
+    });
+});
+//# sourceMappingURL=lifecycle.test.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"lifecycle.test.js","sourceRoot":"","sources":["../../src/lib/lifecycle.test.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,MAAM,CAAC;AAC9B,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAEpC,EAAE,CAAC,kDAAkD,EAAE,GAAG,EAAE;QAIpD,SAAS;gCAHd,OAAO,CAAC;gBACP,OAAO,EAAE,kBAAkB;aAC5B,CAAC;;;;0BACsB,WAAW;;;;6BAAnB,SAAQ,WAAW;;;;gDAGhC,KAAK,EAAE;gDAMP,KAAK,EAAE;gBALR,mMAAA,gBAAgB,6DAGf;gBAGD,mMAAA,gBAAgB,6DAGf;gBAbH,6KAcC;;;gBAdK,uDAAS;;YACb,SAAS,IADL,mDAAS,EACuB,EAAE,EAAC;YAGvC,gBAAgB;gBACd,IAAI,CAAC,SAAS,CAAC,kBAAkB,CAAC,KAAK,CAAC,CAAC;gBACzC,IAAI,CAAC,SAAS,CAAC,kBAAkB,CAAC,EAAE,CAAC;YACvC,CAAC;YAGD,gBAAgB;gBACd,IAAI,CAAC,SAAS,CAAC,kBAAkB,CAAC,KAAK,CAAC,CAAC;gBACzC,IAAI,CAAC,SAAS,CAAC,kBAAkB,CAAC,EAAE,CAAC;YACvC,CAAC;;;;IAGH,MAAM,EAAE,GAAG,IAAI,SAAS,EAAE,CAAC;IAE3B,MAAM,CAAC,SAAS,CAAC,EAAE,CAAC,SAAS,EAAE;QAC7B,gBAAgB,EAAE,CAAC;QACnB,gBAAgB,EAAE,CAAC;KACpB,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/target/lib/metadata.d.ts

@@ -10,6 +10,7 @@ export declare class ElementMetadata {
         cb: (e: Event) => void;
         root: ListenerRootSelector;
     }>;
+    onReady: Set<Function>;
 }
 export declare class MetadataStore extends WeakMap<object, ElementMetadata> {
     read(value: object): ElementMetadata;

package/target/lib/metadata.js

@@ -2,6 +2,7 @@ Symbol.metadata ??= Symbol('Symbol.metadata');
 export class ElementMetadata {
     attrs = [];
     listeners = new Map();
+    onReady = new Set();
 }
 export class MetadataStore extends WeakMap {
     read(value) {

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;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"}
+{"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;IACtF,OAAO,GAAG,IAAI,GAAG,EAAY,CAAC;CAC/B;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/query.d.ts

@@ -0,0 +1,9 @@
+type Tags = keyof HTMLElementTagNameMap;
+type SVGTags = keyof SVGElementTagNameMap;
+type MathTags = keyof MathMLElementTagNameMap;
+type QueryResult<T> = (updates?: Partial<T>) => T;
+export declare function query<K extends Tags>(selectors: K): QueryResult<HTMLElementTagNameMap[K]>;
+export declare function query<K extends SVGTags>(selectors: K): QueryResult<SVGElementTagNameMap[K]>;
+export declare function query<K extends MathTags>(selectors: K): QueryResult<MathMLElementTagNameMap[K]>;
+export declare function query<E extends HTMLElement = HTMLElement>(selectors: string): QueryResult<E>;
+export {};

package/target/lib/query.js

@@ -0,0 +1,24 @@
+export function query(query) {
+    let res = null;
+    return function (updates) {
+        if (res) {
+            return res;
+        }
+        if (this.shadowRoot) {
+            res = this.shadowRoot.querySelector(query);
+        }
+        else {
+            res = this.querySelector(query);
+        }
+        if (!res) {
+            throw new Error('could not find element');
+        }
+        if (updates) {
+            for (let update in updates) {
+                Reflect.set(res, update, updates[update]);
+            }
+        }
+        return res;
+    };
+}
+//# sourceMappingURL=query.js.map

package/target/lib/query.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"query.js","sourceRoot":"","sources":["../../src/lib/query.ts"],"names":[],"mappings":"AAUA,MAAM,UAAU,KAAK,CAAiB,KAAQ;IAC5C,IAAI,GAAG,GAAoC,IAAI,CAAC;IAEhD,OAAO,UAA6B,OAA2C;QAC7E,IAAI,GAAG,EAAE,CAAC;YACR,OAAO,GAAG,CAAC;QACb,CAAC;QAED,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,GAAG,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAI,KAAK,CAAC,CAAC;QAChD,CAAC;aAAM,CAAC;YACN,GAAG,GAAG,IAAI,CAAC,aAAa,CAAI,KAAK,CAAC,CAAC;QACrC,CAAC;QAED,IAAI,CAAC,GAAG,EAAE,CAAC;YACT,MAAM,IAAI,KAAK,CAAC,wBAAwB,CAAC,CAAC;QAC5C,CAAC;QAED,IAAI,OAAO,EAAE,CAAC;YACZ,KAAK,IAAI,MAAM,IAAI,OAAO,EAAE,CAAC;gBAC3B,OAAO,CAAC,GAAG,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC;YAC5C,CAAC;QACH,CAAC;QAED,OAAO,GAAG,CAAC;IACb,CAAC,CAAC;AACJ,CAAC"}

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

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