@webtides/element-js 1.1.8 → 1.2.0

package/docs/features/styles.md

@@ -87,6 +87,35 @@ It is also possible to combine the `:host` selector with other matching selector
 }
 ```
 
+#### CSS :state pseudo-class
+
+All _element-js_ elements automatically have the "connected" state added when they are connected and rendered to the DOM. This uses the [ElementInternals.states](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/states) API, which is a standard web API.
+
+You can target elements with specific states using the `:state()` pseudo-class in CSS:
+
+```css
+/* Style the element when it's connected to the DOM */
+:state(connected) {
+    opacity: 1;
+    transition: opacity 0.3s ease-in-out;
+}
+
+/* Style the element when it's not yet connected */
+:not(:state(connected)) {
+    opacity: 0;
+}
+```
+
+You can combine the `:state()` pseudo-class with the `:host` selector in Shadow DOM:
+
+```css
+:host(:state(connected)) {
+    border: 1px solid green;
+}
+```
+
+> Note: The `:state()` pseudo-class is part of the standard CSS Selectors Level 4 specification, but it might not be recognized by all CSS linters or editors yet.
+
 #### CSS custom properties
 
 Custom properties allow for reusing CSS values throughout a document. To read all about it, see [Using CSS custom properties (variables) - CSS: Cascading Style Sheets | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)

package/package.json

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

package/src/BaseElement.js

@@ -52,6 +52,9 @@ export { toString } from './util/toString.js';
 class BaseElement extends HTMLElement {
     _serializationKey;
 
+    /** @type {ElementInternals} */
+    _internals;
+
     /**
      * @param {BaseElementOptions} options
      */
@@ -76,6 +79,7 @@ class BaseElement extends HTMLElement {
             propertyOptions: {},
             ...options,
         };
+        this._internals = this.attachInternals();
     }
 
     /**
@@ -121,9 +125,11 @@ class BaseElement extends HTMLElement {
             this.registerEventsAndRefs();
 
             this.triggerHook('connected');
+            this._internals.states.add('connected');
         } else {
             this.requestUpdate({ notify: false }).then(() => {
                 this.triggerHook('connected');
+                this._internals.states.add('connected');
                 this.triggerHook('afterUpdate');
             });
         }

package/src/dom-parts/ChildNodePart.js

@@ -295,6 +295,9 @@ export class ChildNodePart extends Part {
         if (typeof value === 'function') {
             return this.parseValue(value());
         }
+        if (value === null || value === undefined) {
+            return value;
+        }
         // Everything else will be rendered as TextNode
         return value.toString();
     }

package/src/util/GlobalStylesStore.js

@@ -4,26 +4,83 @@ import { Store } from './Store.js';
  * @property {CSSStyleSheet[]} cssStyleSheets
  */
 class GlobalStylesStore extends Store {
-    /** @type {Map<Node, CSSStyleSheet>} */
+    /** @type {WeakMap<Node, CSSStyleSheet>} */
     globalStyleSheetsCache = new WeakMap();
 
     constructor() {
         super();
+        this.createGlobalStyleSheetsCache();
         if (globalThis.elementJsConfig?.observeGlobalStyles) {
-            const mutationObserver = new MutationObserver((mutationRecord) => {
-                if (!mutationRecord[0]) return;
-                const filteredNodes = Array.from(mutationRecord[0].addedNodes).filter(
-                    (node) => node.tagName === 'STYLE' || node.tagName === 'LINK',
-                );
-                if (filteredNodes && filteredNodes[0] && filteredNodes[0].tagName === 'LINK') {
-                    filteredNodes[0].onload = () => {
-                        this.requestUpdate();
-                    };
-                } else if (filteredNodes && filteredNodes[0] && filteredNodes[0].tagName === 'STYLE') {
-                    this.requestUpdate();
+            this.initMutationObserver();
+        }
+    }
+
+    initMutationObserver() {
+        const mutationObserver = new MutationObserver(async (mutationRecord) => {
+            if (!mutationRecord[0]) return;
+
+            const filteredNodes = Array.from(mutationRecord[0].addedNodes).filter(
+                (node) => node.tagName === 'STYLE' || node.tagName === 'LINK',
+            );
+
+            filteredNodes.forEach((styleNode) => {
+                if (styleNode.tagName === 'LINK') {
+                    if (styleNode.sheet) {
+                        // already loaded
+                        this.processStylesheet(styleNode.sheet);
+                    } else {
+                        // wait for download
+                        styleNode.onload = () => {
+                            this.processStylesheet(styleNode.sheet);
+                        };
+                    }
+                } else if (styleNode.tagName === 'STYLE') {
+                    this.processStylesheet(styleNode.sheet);
                 }
             });
-            mutationObserver.observe(globalThis.document, { subtree: true, childList: true });
+        });
+        mutationObserver.observe(globalThis.document, { subtree: true, childList: true });
+    }
+
+    createGlobalStyleSheetsCache() {
+        Array.from(globalThis.document?.styleSheets).map((styleSheet) => this.processStylesheet(styleSheet));
+    }
+
+    processStylesheet(styleSheet) {
+        let cssStyleSheet = this.globalStyleSheetsCache.get(styleSheet.ownerNode);
+
+        if (cssStyleSheet) {
+            return;
+        }
+
+        // if it does not exist yet -> build it
+        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') {
+            const cssStyleSheet = new CSSStyleSheet({
+                baseURL: styleSheet.href,
+                media: styleSheet.media,
+                disabled: styleSheet.disabled,
+            });
+            try {
+                Array.from(styleSheet?.cssRules ?? []).map((rule, index) =>
+                    cssStyleSheet.insertRule(rule.cssText, index),
+                );
+
+                this.globalStyleSheetsCache.set(styleSheet.ownerNode, cssStyleSheet);
+
+                this.requestUpdate();
+                // update observer that there might be new styles to adopt
+            } catch (e) {
+                console.error(
+                    'GlobalStylesStore: cannot read cssRules. Maybe add crossorigin="anonymous" to your style link?',
+                    e,
+                );
+            }
         }
     }
 
@@ -46,31 +103,10 @@ class GlobalStylesStore extends Store {
                 return;
             }
 
-            // TODO: this will always be null as we never set anything to the cache...
             let cssStyleSheet = this.globalStyleSheetsCache.get(styleSheet.ownerNode);
-            if (!cssStyleSheet) {
-                if (styleSheet.ownerNode.tagName === 'STYLE') {
-                    cssStyleSheet = new CSSStyleSheet({ media: styleSheet.media, disabled: styleSheet.disabled });
-                    cssStyleSheet.replaceSync(styleSheet.ownerNode.textContent);
-                } else if (styleSheet.ownerNode.tagName === 'LINK') {
-                    cssStyleSheet = new CSSStyleSheet({
-                        baseURL: styleSheet.href,
-                        media: styleSheet.media,
-                        disabled: styleSheet.disabled,
-                    });
-                    try {
-                        Array.from(styleSheet?.cssRules ?? []).map((rule, index) =>
-                            cssStyleSheet.insertRule(rule.cssText, index),
-                        );
-                    } catch (e) {
-                        console.error(
-                            'GlobalStylesStore: cannot read cssRules. Maybe add crossorigin="anonymous" to your style link?',
-                            e,
-                        );
-                    }
-                }
+            if (cssStyleSheet) {
+                cssStyleSheets.push(cssStyleSheet);
             }
-            cssStyleSheets.push(cssStyleSheet);
         });
 
         return cssStyleSheets;