diff --git a/src/element.ts b/src/element.ts index c8150f6..c40b366 100644 --- a/src/element.ts +++ b/src/element.ts @@ -47,7 +47,7 @@ export function createElementType( this.__releaseCallbacks = []; this.__propertyChangedCallbacks = []; this.__updating = {}; - this.props = {}; + this.props = initializeProps(this as any, propDefinition); } connectedCallback() { @@ -55,7 +55,6 @@ export function createElementType( this.__releaseCallbacks = []; this.__propertyChangedCallbacks = []; this.__updating = {}; - this.props = initializeProps(this as any, propDefinition); const props = propValues(this.props as PropsDefinition), ComponentType = this.Component as | Function @@ -89,7 +88,6 @@ export function createElementType( } attributeChangedCallback(name: string, oldVal: string, newVal: string) { - if (!this.__initialized) return; if (this.__updating[name]) return; name = this.lookupProp(name)!; if (name in propDefinition) { diff --git a/src/utils.ts b/src/utils.ts index e68021a..7c17fe0 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -85,13 +85,7 @@ export function initializeProps( const props = cloneProps(propDefinition), propKeys = Object.keys(propDefinition) as Array>; propKeys.forEach((key) => { - const prop = props[key], - attr = element.getAttribute(prop.attribute), - value = element[key]; - if (attr != null) prop.value = prop.parse ? parseAttributeValue(attr) : attr; - if (value != null) - prop.value = Array.isArray(value) ? value.slice(0) : value; - prop.reflect && reflect(element, prop.attribute, prop.value, !!prop.parse); + const prop = props[key] Object.defineProperty(element, key, { get() { return prop.value; diff --git a/test/element.spec.js b/test/element.spec.js index cf6f070..c981630 100644 --- a/test/element.spec.js +++ b/test/element.spec.js @@ -38,8 +38,12 @@ describe('Creating a Custom Element', () => { expect(TestElem).toBeDefined(); }); - it('should upgrade element connected to DOM', () => { + it('should initialized props in new element', () => { elem = new TestElem(); + expect('name' in elem).toBe(true) + }); + + it('should upgrade element connected to DOM', () => { document.body.append(elem); expect(elem.renderRoot.innerHTML).toBe(FIXTURES[0]); });