@webtides/element-js 1.2.5 → 1.2.11

package/docs/README.md

@@ -94,7 +94,7 @@ class ExampleElement extends BaseElement {
     // lifecycle hook
     connected() {
         this.greet();
-    }
+    }                                                                
 
     // reactive attributes/properties
     properties() {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@webtides/element-js",
-    "version": "1.2.5",
+    "version": "1.2.11",
     "module": "index.js",
     "main": "index.js",
     "type": "module",
@@ -19,7 +19,10 @@
         "./src/util/*": "./src/util/*.js",
         "./src/dom-parts/*": "./src/dom-parts/*.js"
     },
-    "repository": "https://github.com/webtides/element-js.git",
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/webtides/element-js.git"
+    },
     "author": "@webtides",
     "license": "MIT",
     "keywords": [

package/src/BaseElement.js

@@ -1,5 +1,10 @@
 import { parseAttribute, isNaN, dashToCamel, camelToDash, isObjectLike } from './util/AttributeParser.js';
-import { getAllElementChildren, getClosestParentCustomElementNode, isOfSameNodeType } from './util/DOMHelper.js';
+import {
+    getAllComposedElementChildren,
+    getAllElementChildren,
+    getClosestParentCustomElementNode,
+    isOfSameNodeType,
+} from './util/DOMHelper.js';
 import { Store } from './util/Store.js';
 import { serializeState, deserializeState, hasSerializedState } from './util/SerializeStateHelper.js';
 import { randomUUID } from './util/crypto.js';
@@ -126,11 +131,15 @@ class BaseElement extends HTMLElement {
 
             this.triggerHook('connected');
             this._internals.states.add('connected');
+            // verification must happen after connection
+            this.verifyProvidedProperties();
         } else {
             this.requestUpdate({ notify: false }).then(() => {
                 this.triggerHook('connected');
                 this._internals.states.add('connected');
                 this.triggerHook('afterUpdate');
+                // verification must happen after connection
+                this.verifyProvidedProperties();
             });
         }
     }
@@ -194,9 +203,6 @@ class BaseElement extends HTMLElement {
         // release dom references
         this.$refs = {};
 
-        // clear state
-        this._state = {};
-
         // cancel pending updates
         if (this._batchUpdate) {
             cancelAnimationFrame(this._batchUpdate);
@@ -292,13 +298,14 @@ class BaseElement extends HTMLElement {
      * Will trigger update() when a property was changed
      */
     defineProperties() {
-        Object.keys({ ...this.injectProperties(), ...this.properties() }).forEach((prop) => {
+        const properties = this.properties();
+        Object.keys({ ...this.injectProperties(), ...properties }).forEach((prop) => {
             // when mixing shadow dom elements with light dom elements and nesting custom elements
             // it might occur that properties where set on an element before it was
             // 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] ?? properties[prop];
             this.defineProperty(prop, value);
         });
     }
@@ -312,11 +319,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 });
@@ -460,14 +462,35 @@ class BaseElement extends HTMLElement {
         const providedKeys = Object.keys(this.provideProperties());
         if (providedKeys.length > 0) {
             this.addEventListener('request-context', this.onRequestContext);
+        }
+    }
+
+    /**
+     * Verifies provided context after the element has finished connecting.
+     *
+     * This is used as a failover step for late providers and lifecycle race conditions,
+     * especially when a provided value is assigned inside `connected()` and the initial
+     * context request was resolved before that mutation happened.
+     *
+     * By replaying matching requests here we ensure children receive the final provider
+     * value instead of being stuck with an early placeholder like `null`.
+     */
+
+    verifyProvidedProperties() {
+        // define context provider
+        const providedProperties = this.provideProperties();
+        const providedKeys = Object.keys(providedProperties);
+        if (providedKeys.length > 0) {
+            // take both light and shadow dom into account.
+            const composedChildren = getAllComposedElementChildren(this, BaseElement);
             // check if there are already connected elements in child dom and restart requests
-            getAllElementChildren(this.getRoot(), BaseElement).forEach((customChild) => {
+            composedChildren.forEach((customChild) => {
                 // if injectProperties?.() is defined it means that the child got connected BEFORE the parent (Runtime Issue)
                 const requestedProperties = customChild.injectProperties?.() ?? {};
                 Object.entries(requestedProperties).forEach(([key, value]) => {
                     // iterate over requested properties to find missed context requests
-                    if (providedKeys.includes(key)) {
-                        // owns the provided  key -> replay request
+                    if (providedKeys.includes(key) && customChild[key] !== providedProperties[key]) {
+                        // owns the provided key -> replay request
                         customChild.requestContext(key, value);
                     }
                 });

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
      */
@@ -81,7 +90,7 @@ class StyledElement extends BaseElement {
 
         this.getRoot().adoptedStyleSheets = [
             ...(adoptGlobalStyleSheets ? globalStylesStore.getGlobalStyleSheets(this._options.adoptGlobalStyles) : []),
-            ...this.constructor['elementStyleSheets'],
+            ...(this.constructor?.['elementStyleSheets'] ?? []),
         ];
     }
 
@@ -98,7 +107,7 @@ class StyledElement extends BaseElement {
 
         const appendableStyles = [
             ...(adoptGlobalStyleSheets ? globalStylesStore.getGlobalStyleSheets(this._options.adoptGlobalStyles) : []),
-            ...this.constructor['elementStyleSheets'],
+            ...(this.constructor?.['elementStyleSheets'] ?? []),
         ];
 
         appendableStyles.forEach((styleSheet, index) => {

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());
     }

package/src/util/DOMHelper.js

@@ -60,7 +60,7 @@ export function getShadowParentOrBody(element) {
     return document.body;
 }
 
-// TODO: add function for getClosestParentOfNodeType('custom-element')
+// TODO: add function for getClosestParentOfNo  deType('custom-element')
 
 /**
  * Get the closest/first parent node that is a custom element
@@ -76,7 +76,7 @@ export function getClosestParentCustomElementNode(domNode) {
 }
 
 /**
- * Get all
+ * Get all custom element children of a DOM node
  * @param {Node} domNode
  * @param {{prototype: HTMLElement, new()}} instanceOfFilter
  * @return {Node[]}
@@ -95,6 +95,20 @@ export function getAllElementChildren(domNode, instanceOfFilter = HTMLElement) {
     return customElements;
 }
 
+/**
+ * Get all custom element children of a DOM node, including children inside the node's shadow root.
+ *
+ * @param {Node} domNode - The root node to start the traversal from.
+ * @param {{prototype: HTMLElement, new(): HTMLElement}} [instanceOfFilter=HTMLElement] - Constructor used to filter matching custom elements.
+ * @return {Set<HTMLElement>} A set of matching custom element descendants.
+ */
+export function getAllComposedElementChildren(domNode, instanceOfFilter = HTMLElement) {
+    return new Set([
+        ...getAllElementChildren(domNode, instanceOfFilter),
+        ...(domNode.shadowRoot ? getAllElementChildren(domNode.shadowRoot, instanceOfFilter) : []),
+    ]);
+}
+
 /**
  * Checks whether two nodes are of the same node type
  * @param {Node} nodeA