@webtides/element-js 1.2.6 → 1.2.12

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.6",
+    "version": "1.2.12",
     "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();
             });
         }
     }
@@ -289,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);
         });
     }
@@ -452,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

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

package/src/util/GlobalStylesStore.js

@@ -54,13 +54,13 @@ class GlobalStylesStore extends Store {
         }
 
         // if it does not exist yet -> build it
-        if (styleSheet.ownerNode.tagName === 'STYLE') {
+        if (styleSheet.ownerNode?.tagName === 'STYLE') {
             const cssStyleSheet = new CSSStyleSheet({ media: styleSheet.media, disabled: styleSheet.disabled });
             cssStyleSheet.replaceSync(styleSheet.ownerNode.textContent);
 
             this.globalStyleSheetsCache.set(styleSheet.ownerNode, cssStyleSheet);
             this.requestUpdate();
-        } else if (styleSheet.ownerNode.tagName === 'LINK') {
+        } else if (styleSheet.ownerNode?.tagName === 'LINK') {
             const cssStyleSheet = new CSSStyleSheet({
                 baseURL: styleSheet.href,
                 media: styleSheet.media,