@webtides/element-js 1.2.4 → 1.2.6

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@webtides/element-js",
-    "version": "1.2.4",
+    "version": "1.2.6",
     "module": "index.js",
     "main": "index.js",
     "type": "module",

package/src/BaseElement.js

@@ -194,9 +194,6 @@ class BaseElement extends HTMLElement {
         // release dom references
         this.$refs = {};
 
-        // clear state
-        this._state = {};
-
         // cancel pending updates
         if (this._batchUpdate) {
             cancelAnimationFrame(this._batchUpdate);
@@ -298,7 +295,7 @@ class BaseElement extends HTMLElement {
             // registered or connected. To avoid such timing issues we check
             // if a value was set for that specific property on the
             // prototype before assigning a default value
-            const value = this[prop] || this.properties()[prop];
+            const value = this[prop] ?? this.properties()[prop];
             this.defineProperty(prop, value);
         });
     }
@@ -312,11 +309,6 @@ class BaseElement extends HTMLElement {
      * @param {boolean} isAttribute
      */
     defineProperty(property, value, isAttribute = false) {
-        if (this._state.hasOwnProperty(property)) {
-            // property has already been defined as an attribute nothing to do here
-            return;
-        }
-
         // if property did not come from an attribute but has the option to reflect // enabled or custom fn
         if (!isAttribute && this._options.propertyOptions[property]?.reflect) {
             this.reflectProperty({ property: property, newValue: value });
@@ -337,8 +329,9 @@ class BaseElement extends HTMLElement {
             this._state[property].subscribe(this);
         }
 
-        if (Object.getOwnPropertyDescriptor(this, property)) {
-            // instance already has a defined property
+        const descriptor = Object.getOwnPropertyDescriptor(this, property);
+        if (descriptor && descriptor.set && descriptor.get) {
+            // instance already has a defined, reactive  ejs property
             return;
         }
         Object.defineProperty(this, property, {

package/src/StyledElement.js

@@ -39,17 +39,6 @@ class StyledElement extends BaseElement {
                 return cssStyleSheet;
             });
         }
-
-        if (supportsAdoptingStyleSheets() && this._options.shadowRender) {
-            // adopting does only make sense in shadow dom. Fall back to append for light elements
-            this.adoptStyleSheets();
-
-            if (this._options.adoptGlobalStyles !== false) {
-                globalStylesStore.subscribe(() => {
-                    this.adoptStyleSheets();
-                });
-            }
-        }
     }
 
     /**
@@ -73,6 +62,26 @@ class StyledElement extends BaseElement {
         super.update(options);
     }
 
+    /**
+     * Start the adoption of external stylesheets
+     * adopt global styles from document
+     * subscribe to globalStylesStore for updates
+     * @returns { void }
+     */
+
+    initStyleAdoption() {
+        if (this._options.shadowRender && supportsAdoptingStyleSheets()) {
+            // adopting does only make sense in shadow dom. Fall back to append for light elements
+            this.adoptStyleSheets();
+
+            if (this._options.adoptGlobalStyles !== false) {
+                globalStylesStore.subscribe(() => {
+                    this.adoptStyleSheets();
+                });
+            }
+        }
+    }
+
     /**
      * Adopt stylesheets
      */

package/src/TemplateElement.js

@@ -28,10 +28,8 @@ class TemplateElement extends StyledElement {
 
     /**
      * Overrides the native `connectedCallback` of the HTMLElement to set up and initialize our element.
-     * This will attach a shadow DOM if the element is supposed to render in shadow DOM.
      */
     connectedCallback() {
-        if (this._options.shadowRender && !this.shadowRoot) this.attachShadow({ mode: 'open' });
         super.connectedCallback();
     }
 
@@ -54,8 +52,16 @@ class TemplateElement extends StyledElement {
 
     /**
      * Render the template to the root
+     * This will attach a shadow DOM if the element is supposed to render in shadow DOM.
      */
     renderTemplate() {
+        const firstRender = this._options.shadowRender && !this.shadowRoot;
+        if (firstRender) {
+            this.attachShadow({ mode: 'open' });
+            // init external stylesheets
+            this.initStyleAdoption();
+        }
+
         const template = this._template || this.template();
         render(template, this.getRoot());
     }