@webtides/element-js 1.1.7 → 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.7",
+    "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

@@ -2,211 +2,204 @@ import { COMMENT_NODE, ELEMENT_NODE } from '../util/DOMHelper.js';
 import { Part } from './Part.js';
 import { TemplateResult } from './TemplateResult.js';
 import { TemplatePart } from './TemplatePart.js';
+import { PartMarkers } from './PartMarkers.js';
 
 /**
- * @param {Element} commentNode
- * @param {Element[]} nodes
+ * @param {Comment} commentNode
+ * @param {Node[]} nodes
  */
-const insertNodesBetweenComments = (commentNode, nodes) => {
+export const insertNodesBetweenComments = (commentNode, nodes) => {
     for (const node of nodes) {
         commentNode.parentNode.insertBefore(node, commentNode);
     }
 };
 
 /**
- * @param {Element} commentNode
+ * @param {Comment} commentNode
+ * @param {Node[]} nodes
  */
-const removeNodesBetweenComments = (commentNode) => {
-    while (commentNode.previousSibling) {
-        if (
-            commentNode.previousSibling.nodeType === COMMENT_NODE &&
-            commentNode.previousSibling.data === commentNode.data.replace('/', '')
-        ) {
-            break;
-        }
-        commentNode.parentNode.removeChild(commentNode.previousSibling);
+export const replaceNodesBetweenComments = (commentNode, nodes) => {
+    removeNodesBetweenComments(commentNode);
+    for (const node of nodes) {
+        commentNode.parentNode.insertBefore(node, commentNode);
     }
 };
 
 /**
- * @param {Node} parentNode
- * @param {Node[]} domChildNodes
- * @param {Node[]} templateChildNodes
- * @param {Node} anchorNode
+ * @param {Comment} commentNode
+ */
+export const removeNodesBetweenComments = (commentNode) => {
+    const nodes = getNodesBetweenComments(commentNode);
+    for (const node of nodes) {
+        commentNode.parentNode.removeChild(node);
+    }
+};
+
+/**
+ * @param {Comment} commentNode
+ * @param {boolean} includeComments
  * @return {Node[]}
  */
-const diffChildNodes = function (parentNode, domChildNodes, templateChildNodes, anchorNode) {
-    // TODO: when diffing arrays there is sometimes two lists of TemplateParts instead of lists of childNodes
-    const offset = domChildNodes.includes(anchorNode) ? 1 : 0;
-
-    // release first level references to prevent cache mutation
-    const clonedDomChildNodes = [...domChildNodes];
-    const clonedTemplateChildNodes = [...templateChildNodes];
-
-    // We always want to have the two arrays (domChildNodes and cloneTemplateChildNodes) to have the same length.
-    // We also don't ever want to replace/diff the last node of the domChildNodes as it will always be the
-    // closing comment marker (/template-part) aka the anchorNode. So we push it to the end by inserting undefined items.
-    if (clonedTemplateChildNodes.length > clonedDomChildNodes.length) {
-        const nodesToFill = clonedTemplateChildNodes.length - clonedDomChildNodes.length;
-        for (let i = 0; i < nodesToFill; i++) {
-            clonedDomChildNodes.splice(clonedDomChildNodes.length - offset, 0, undefined);
+export const getNodesBetweenComments = (commentNode, includeComments = false) => {
+    const nodes = [];
+    let currentNode = includeComments ? commentNode : commentNode.previousSibling;
+    let nestingLevel = 0;
+
+    while (currentNode) {
+        if (includeComments) nodes.unshift(currentNode);
+
+        if (currentNode.nodeType === COMMENT_NODE && currentNode.data === commentNode.data) {
+            nestingLevel++;
         }
-    }
 
-    if (clonedDomChildNodes.length > clonedTemplateChildNodes.length) {
-        const nodesToFill = clonedDomChildNodes.length - clonedTemplateChildNodes.length;
-        for (let i = 0; i < nodesToFill; i++) {
-            clonedTemplateChildNodes.splice(clonedTemplateChildNodes.length - offset, 0, undefined);
+        if (currentNode.nodeType === COMMENT_NODE && currentNode.data === commentNode.data.replace('/', '')) {
+            if (nestingLevel === 0) {
+                break;
+            }
+            nestingLevel--;
         }
+
+        if (!includeComments) nodes.unshift(currentNode);
+        currentNode = currentNode.previousSibling;
     }
+    return nodes;
+};
 
-    const length = clonedDomChildNodes.length;
+/**
+ * @param {Node[]} newChildNodes
+ * @param {Comment} anchorNode
+ */
+const diffChildNodes = function (newChildNodes, anchorNode) {
+    const parentNode = anchorNode.parentNode;
+    const oldChildNodes = getNodesBetweenComments(anchorNode);
+
+    const length = Math.max(oldChildNodes.length, newChildNodes.length);
     // Diff each node in the child node lists
     for (let index = 0; index < length; index++) {
-        let domChildNode = clonedDomChildNodes[index];
-        let templateChildNode = clonedTemplateChildNodes[index];
+        let oldChildNode = oldChildNodes[index];
+        let newChildNode = newChildNodes[index];
 
-        // If the DOM node doesn't exist, append/copy the template node
-        if (domChildNode === undefined) {
-            if (typeof templateChildNode === 'object' && 'ELEMENT_NODE' in templateChildNode) {
-                parentNode.insertBefore(templateChildNode, anchorNode);
-            } else {
-                // TODO: this might not be performant?! Can we maybe handle this in processDomNode?!
-                // TODO: I think that we need to make ChildNodeParts from all primitive values as well
-                parentNode.insertBefore(document.createTextNode(templateChildNode), anchorNode);
-            }
+        if (newChildNode && !newChildNode.nodeType) {
+            throw new Error('ChildNodePart: newChildNode is not a node');
+        }
+
+        // If the DOM node doesn't exist, append/copy the new node
+        if (oldChildNode === undefined) {
+            parentNode.insertBefore(newChildNode, anchorNode);
             continue;
         }
 
-        if (templateChildNode === undefined) {
-            // If the template node doesn't exist, remove the node in the DOM
-            if ('ELEMENT_NODE' in domChildNode) {
-                // remove dom node
-                parentNode.removeChild(domChildNode);
-            } else if (Array.isArray(domChildNode) || domChildNode instanceof TemplatePart) {
-                // remove childNodes
-                const childNodes = Array.isArray(domChildNode) ? domChildNode : domChildNode.childNodes;
-                for (const childNode of childNodes) {
-                    childNode.remove();
-                }
-            } else {
-                console.log('This should not happen... what do we do about this node?!', { domChildNode });
-            }
+        // If the new node doesn't exist, remove the node in the DOM
+        if (newChildNode === undefined) {
+            parentNode.removeChild(oldChildNode);
             continue;
         }
 
-        // If DOM node is equal to the template node, don't do anything in the DOM
-        if (
-            domChildNode === templateChildNode ||
-            (domChildNode.nodeType && templateChildNode.nodeType && domChildNode.isEqualNode(templateChildNode))
-        ) {
-            // but we need to assign the current DOM node into the templateChildNodes
-            // as they will be returned here at the end and become the domNodes for the next diffing.
-            const childIndex = templateChildNodes.indexOf(templateChildNode);
-            templateChildNodes[childIndex] = domChildNode;
+        // If DOM node is equal to the new node, don't do anything in the DOM
+        if (oldChildNode === newChildNode || oldChildNode.isEqualNode(newChildNode)) {
             continue;
         }
 
         // Everything else is somehow different and can be replaced
-        if (parentNode.contains(domChildNode)) {
-            parentNode.replaceChild(templateChildNode, domChildNode);
-        } else {
-            console.warn('This should not happen', {
-                parentNode,
-                'parentNode.contains(domChildNode)': parentNode.contains(domChildNode),
-                templateChildNode,
-                domChildNode,
-            });
-        }
+        parentNode.replaceChild(newChildNode, oldChildNode);
     }
-    return templateChildNodes;
+};
+
+function getType(value) {
+    if (value instanceof TemplatePart) return 'templatePart';
+    if (value === null || value === undefined) return 'empty';
+    if (Array.isArray(value)) return value.length === 0 ? 'empty' : 'array';
+    if (value?.nodeType) return 'node';
+    return 'text';
+}
+
+// TODO: handle funcitons?! Should be handled in parseArray!!!
+const unwrapArray = (nodes) => {
+    // we have to unwrap any complex objects inside the array so that we can diff arrays of childNodes
+    return nodes.flatMap((value) => {
+        if (value instanceof TemplatePart) {
+            return value.childNodes;
+        }
+        if (Array.isArray(value)) {
+            return unwrapArray(value);
+        }
+        if (typeof value === 'boolean' || typeof value === 'number' || typeof value === 'string') {
+            return document.createTextNode(value);
+        }
+        return value;
+    });
 };
 
 /**
- * @param {Node} comment
+ * @param {Comment} comment
  * @param {TemplatePart | any[] | any} initialValue
+ * @param {boolean} serverSideRendered
  * @return {(function(*): void)|*}
  */
-export const processNodePart = (comment, initialValue) => {
-    let nodes = initialValue instanceof TemplatePart ? initialValue.childNodes : [];
-    let oldValue = initialValue instanceof TemplatePart ? initialValue.strings : initialValue;
+export const processNodePart = (comment, initialValue, serverSideRendered = false) => {
+    let oldValueType = 'empty';
+    let oldValue = undefined;
     // this is for string values to be inserted into the DOM. A cached TextNode will be used so that we don't have to constantly create new DOM nodes.
-    let cachedTextNode = undefined;
+    // TODO: when server side rendered, we need to get the text node from the DOM no?!
+    let cachedTextNode = globalThis.document?.createTextNode('');
+
+    if (serverSideRendered) {
+        oldValueType = getType(initialValue);
+        oldValue = initialValue instanceof TemplatePart ? initialValue.strings : initialValue;
+    }
 
     const processNodeValue = (newValue) => {
-        switch (typeof newValue) {
-            // primitives are handled as text content
-            case 'string':
-            case 'number':
-            case 'boolean':
-                if (oldValue !== newValue) {
-                    oldValue = newValue;
-                    if (!cachedTextNode) cachedTextNode = globalThis.document?.createTextNode('');
-                    cachedTextNode.data = newValue;
-
-                    if (comment.previousSibling?.data === comment.data.replace('/', '')) {
-                        // the part is empty - we haven't rendered it yet
-                        comment.parentNode.insertBefore(cachedTextNode, comment);
-                    } else {
-                        // the part was already rendered (either server side or on the client)
-                        comment.previousSibling.data = newValue;
-                    }
-
-                    nodes = [cachedTextNode];
-                }
-                break;
-            // null (= typeof "object") and undefined are used to clean up previous content
-            case 'object':
-            case 'undefined':
-                if (newValue === null || newValue === undefined) {
-                    if (oldValue !== newValue) {
-                        oldValue = newValue;
-                        removeNodesBetweenComments(comment);
-                        nodes = [];
-                    }
-                    break;
-                }
-                if (Array.isArray(newValue)) {
-                    if (newValue.length === 0) {
-                        removeNodesBetweenComments(comment);
-                        nodes = [];
-                    } else {
-                        // TODO: this will always diff the arrays although they might not have changed...
-                        const unwrapArray = (nodes) => {
-                            // we have to unwrap any complex objects inside the array so that we can diff arrays of childNodes
-                            return nodes.flatMap((value) => {
-                                if (value instanceof TemplatePart) {
-                                    return value.childNodes;
-                                }
-                                if (Array.isArray(value)) {
-                                    return unwrapArray(value);
-                                }
-                                return value;
-                            });
-                        };
-                        nodes = diffChildNodes(comment.parentNode, nodes, unwrapArray(newValue), comment);
-                    }
-                    oldValue = newValue;
-                    break;
-                }
+        let newValueType = getType(newValue);
 
-                if (newValue instanceof TemplatePart && oldValue !== newValue.strings) {
-                    // if the new value is a node or a fragment, and it's different from the live node, then it's diffed.
-                    // static strings have changed in tpl part
-                    oldValue = newValue.strings;
-                    nodes = diffChildNodes(comment.parentNode, nodes, newValue.childNodes, comment);
-                } else if (oldValue !== newValue && 'ELEMENT_NODE' in newValue) {
-                    // DOM Node changed, needs diffing
-                    oldValue = newValue;
-                    nodes = diffChildNodes(comment.parentNode, nodes, [newValue], comment);
-                }
-                break;
-            case 'function':
-                processNodeValue(newValue(comment));
-                break;
+        if (oldValueType === newValueType && oldValue === newValue) return;
+
+        if (oldValueType !== newValueType) {
+            if (newValueType === 'empty') {
+                removeNodesBetweenComments(comment);
+            } else {
+                const getNodesForType = (value, type) => {
+                    if (type === 'templatePart') return value.childNodes;
+                    if (type === 'array') return unwrapArray(value);
+                    if (type === 'node') return [value];
+
+                    // Every else falls back to rendering a text node
+                    cachedTextNode.data = value;
+                    return [cachedTextNode];
+                };
+                replaceNodesBetweenComments(comment, getNodesForType(newValue, newValueType));
+            }
+
+            oldValueType = newValueType;
+            oldValue = newValue;
+            return;
+        }
+
+        if (newValueType === 'text') {
+            cachedTextNode.data = newValue;
+
+            oldValue = newValue;
+            return;
+        }
+
+        if (newValueType === 'array') {
+            diffChildNodes(unwrapArray(newValue), comment);
+
+            oldValue = newValue;
+            return;
+        }
+
+        if (newValueType === 'node') {
+            diffChildNodes([newValue], comment);
+
+            oldValue = newValue;
         }
     };
 
+    if (!serverSideRendered) {
+        // initial rendering
+        processNodeValue(initialValue);
+    }
+
     return processNodeValue;
 };
 
@@ -214,69 +207,35 @@ export const processNodePart = (comment, initialValue) => {
  * For updating a text node, a sequence of child nodes or an array of `any` values
  */
 export class ChildNodePart extends Part {
-    // TODO: this is only for array values
-    /** @type {Part[]} */
-    parts = [];
+    /** @type {PartMarkers|undefined} */
+    markers;
 
-    // TODO: this is only for TemplatePart values
-    templatePart = undefined;
+    /** @type {TemplatePart|undefined} */
+    templatePart;
 
-    // TODO: maybe we can store a generic vale|parsedValue that can be either parts[] | templatePart | any
-
-    /** @type {Node[]} */
-    childNodes = [];
+    /** @type {Part[]} */
+    arrayParts = [];
 
     /**
      * @param {Node} startNode - the start comment marker node
      * @param {any | any[]} value
      */
     constructor(startNode, value) {
-        if (startNode && startNode?.nodeType !== COMMENT_NODE) {
-            throw new Error('ChildNodePart: startNode is not a comment node');
+        if (!startNode || startNode?.nodeType !== COMMENT_NODE) {
+            throw new Error(
+                startNode ? 'ChildNodePart: startNode is undefined' : 'ChildNodePart: startNode is not a comment node',
+            );
         }
 
         super();
 
-        let endNode = undefined;
-        let serverSideRendered = false;
-        if (startNode) {
-            startNode.__part = this; // add Part to comment node for debugging in the browser
-
-            const placeholder = startNode.data;
-            const childNodes = [startNode];
-            let childNode = startNode.nextSibling;
-            while (childNode && childNode.data !== `/${placeholder}`) {
-                childNodes.push(childNode);
-                childNode = childNode.nextSibling;
-            }
-
-            endNode = childNode;
-            childNodes.push(endNode);
-
-            // if not SSRed, childNodes will only ever have two comment nodes, the start and the end marker
-            if (childNodes.length > 2) {
-                serverSideRendered = true;
-            }
-
-            this.childNodes = childNodes;
-        }
+        startNode.__part = this; // add Part to comment node for debugging in the browser
+        this.markers = PartMarkers.createFromStartNode(startNode);
 
         // value can become array | TemplatePart | any
         const initialValue = this.parseValue(value);
 
-        if (endNode) {
-            this.processor = processNodePart(endNode, serverSideRendered ? initialValue : undefined);
-        }
-
-        if (!serverSideRendered) {
-            if (value instanceof TemplateResult || Array.isArray(value)) {
-                this.updateParts(value);
-            }
-
-            if (!(value instanceof TemplateResult)) {
-                this.processor?.(initialValue);
-            }
-        }
+        this.processor = processNodePart(this.markers?.endNode, initialValue, this.markers?.serverSideRendered);
     }
 
     /**
@@ -290,9 +249,7 @@ export class ChildNodePart extends Part {
             this.updateParts(value);
         }
 
-        if (!(value instanceof TemplateResult)) {
-            this.processor?.(parsedValue);
-        }
+        this.processor?.(parsedValue);
     }
 
     /**
@@ -304,38 +261,45 @@ export class ChildNodePart extends Part {
         }
         if (Array.isArray(value)) {
             for (let index = 0; index < value.length; index++) {
-                this.parts[index]?.update(value[index]);
+                this.arrayParts[index]?.update(value[index]);
             }
         }
     }
 
     /**
      * @param {TemplateResult | any[] | any} value
-     * @return {TemplatePart | any[] | any}
+     * @return {TemplatePart | Node | string | Array<TemplatePart | Node | string>}
      */
     parseValue(value) {
         if (value instanceof TemplateResult) {
             if (!this.templatePart) {
-                const startNode = Array.from(this.childNodes)
-                    .filter((node) => node.nodeType === COMMENT_NODE)
-                    .find((node) => node.data === 'template-part');
-                this.templatePart = new TemplatePart(startNode, value);
-                const serverSideRendered = startNode !== undefined;
-                if (!serverSideRendered) {
-                    // TODO: we should already have the "endNode" from the constructor...
-                    const endNode = Array.from(this.childNodes)
-                        .filter((node) => node.nodeType === COMMENT_NODE)
-                        .find((node) => node.data.includes('/dom-part-'));
+                this.templatePart = new TemplatePart(this.markers?.findNestedStartNode('template-part'), value);
+                if (!this.markers?.serverSideRendered) {
                     // INFO: this is similar to TemplateResult#237
-                    insertNodesBetweenComments(endNode, this.templatePart.childNodes);
+                    replaceNodesBetweenComments(this.markers?.endNode, this.templatePart.childNodes);
                 }
+            } else if (this.templatePart.strings !== value.strings) {
+                // this means we have a different TemplateResult here with maybe different parts also
+                this.templatePart = new TemplatePart(undefined, value);
+                // INFO: this is similar to TemplateResult#237
+                replaceNodesBetweenComments(this.markers?.endNode, this.templatePart.childNodes);
             }
             return this.templatePart;
         }
         if (Array.isArray(value)) {
             return this.parseArray(value);
         }
-        return value;
+        if (value?.nodeType) {
+            return value;
+        }
+        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();
     }
 
     /**
@@ -348,28 +312,30 @@ export class ChildNodePart extends Part {
         for (let index = 0; index < values.length; index++) {
             let value = values[index];
 
+            // TODO: it would be better to use this.parseValue() here!!!
+
             if (value instanceof TemplateResult) {
                 // TODO this is probably wrong. Should only be taken from parts cache if it has the same type (eg. template vs string, mixed types arrays)
-                let templatePart = this.parts[index];
+                let templatePart = this.arrayParts[index];
                 if (!templatePart) {
-                    const templatePartCommentNodes = this.childNodes?.filter(
+                    const templatePartCommentNodes = this.markers?.childNodes?.filter(
                         (node) => node && node.nodeType === COMMENT_NODE && node.data === 'template-part',
                     );
                     const startNode = templatePartCommentNodes[index];
                     templatePart = new TemplatePart(startNode, value);
-                    this.parts[index] = templatePart;
+                    this.arrayParts[index] = templatePart;
                 }
                 parsedValues[index] = templatePart;
             } else if (Array.isArray(value)) {
-                let childNodePart = this.parts[index];
+                let childNodePart = this.arrayParts[index];
                 if (!childNodePart) {
                     // TODO: this seems not correct :( (maybe Template vs DOM Parts !?)
-                    const templatePartCommentNodes = this.childNodes?.filter(
+                    const templatePartCommentNodes = this.markers?.childNodes?.filter(
                         (node) => node && node.nodeType === COMMENT_NODE && node.data === 'template-part',
                     );
                     const startNode = templatePartCommentNodes[index];
                     childNodePart = new ChildNodePart(startNode, value);
-                    this.parts[index] = childNodePart;
+                    this.arrayParts[index] = childNodePart;
                 }
                 parsedValues[index] = childNodePart;
             } else {

package/src/dom-parts/PartMarkers.js

@@ -0,0 +1,62 @@
+import { COMMENT_NODE } from '../util/DOMHelper.js';
+
+export class PartMarkers {
+    /** @type {Comment} */
+    startNode;
+
+    /** @type {Comment} */
+    endNode;
+
+    /** @type {Node[]} */
+    childNodes = [];
+
+    /** @type {boolean} */
+    serverSideRendered = false;
+
+    /**
+     * @param {Comment} start
+     * @param {Comment} end
+     * @param {Node[]} childNodes
+     * @return {void}
+     */
+    constructor(start, end, childNodes) {
+        this.startNode = start;
+        this.endNode = end;
+        this.childNodes = childNodes;
+
+        // if not SSRed, childNodes will only ever have two comment nodes, the start and the end marker
+        if (childNodes.length > 2) {
+            this.serverSideRendered = true;
+        }
+    }
+
+    /**
+     * @param {string} partType The type of the node to search for. Defaults to 'template-part'.
+     * @return {Node|undefined} The first comment node matching the specified type, or undefined if no match is found.
+     */
+    findNestedStartNode(partType = 'template-part') {
+        return this.childNodes.filter((node) => node.nodeType === COMMENT_NODE).find((node) => node.data === partType);
+    }
+
+    /**
+     * Creates a new instance of PartMarkers from the given start node.
+     * @param {Comment} startNode - The starting comment node that marks the beginning of the section.
+     * @return {PartMarkers} A new instance of the PartMarkers class encapsulating the start and end nodes.
+     */
+    static createFromStartNode(startNode) {
+        let endNode;
+
+        const placeholder = startNode.data;
+        const childNodes = [startNode];
+        let childNode = startNode.nextSibling;
+        while (childNode && childNode.data !== `/${placeholder}`) {
+            childNodes.push(childNode);
+            childNode = childNode.nextSibling;
+        }
+
+        endNode = childNode;
+        childNodes.push(endNode);
+
+        return new PartMarkers(startNode, endNode, childNodes);
+    }
+}

package/src/dom-parts/TemplatePart.js

@@ -2,17 +2,21 @@ import { COMMENT_NODE, convertStringToTemplate } from '../util/DOMHelper.js';
 import { Part } from './Part.js';
 import { TemplateResult } from './TemplateResult.js';
 import { AttributePart } from './AttributePart.js';
-import { ChildNodePart, processNodePart } from './ChildNodePart.js';
+import { ChildNodePart, getNodesBetweenComments, replaceNodesBetweenComments } from './ChildNodePart.js';
 import { NodePart } from './NodePart.js';
 import { RawTextNodePart } from './RawTextNodePart.js';
+import { PartMarkers } from './PartMarkers.js';
 
-/** @type {Map<TemplateStringsArray, Part[]>} */
+/** @type {WeakMap<TemplateStringsArray, Part[]>} */
 const partsCache = new WeakMap();
 
-/** @type {Map<TemplateStringsArray, DocumentFragment>} */
+/** @type {WeakMap<TemplateStringsArray, DocumentFragment>} */
 const fragmentsCache = new WeakMap();
 
 export class TemplatePart extends Part {
+    /** @type {PartMarkers|undefined} */
+    markers;
+
     /** @type {Part[]} */
     parts = [];
 
@@ -21,9 +25,10 @@ export class TemplatePart extends Part {
 
     /** @type {Node[]} */
     childNodes = [];
+    // TODO: there is childNodes here and also in this.markers now...
 
     /**
-     * @param {Node} startNode - the start comment marker node
+     * @param {Node|undefined} startNode - the start comment marker node
      * @param {TemplateResult} value
      */
     constructor(startNode, value) {
@@ -33,53 +38,37 @@ export class TemplatePart extends Part {
 
         super();
 
-        let endNode = undefined;
-        let serverSideRendered = false;
         if (startNode) {
             startNode.__part = this; // add Part to comment node for debugging in the browser
-
-            const placeholder = startNode.data;
-            const childNodes = [startNode];
-            let childNode = startNode.nextSibling;
-            while (childNode && childNode.data !== `/${placeholder}`) {
-                childNodes.push(childNode);
-                childNode = childNode.nextSibling;
-            }
-
-            endNode = childNode;
-            childNodes.push(endNode);
-
-            // if not SSRed, childNodes will only ever have two comment nodes, the start and the end marker
-            if (childNodes.length > 2) {
-                serverSideRendered = true;
-            }
-
-            this.childNodes = childNodes;
+            this.markers = PartMarkers.createFromStartNode(startNode);
+            this.childNodes = this.markers.childNodes;
         }
 
         this.parseValue(value);
 
-        if (!serverSideRendered) {
+        if (!this.markers?.serverSideRendered) {
             // TODO: this is causing double diffing because of the this.parseValue() before, ChildNode parts will be constructed + processed
+            // TODO: I think that maybe ChildNode Parts work, but Other Parts like Attributes are not set initially otherwise...
             this.updateParts(value.values);
         }
 
-        endNode = this.childNodes[this.childNodes.length - 1];
-
-        if (endNode) {
-            this.processor = processNodePart(endNode, this);
-        }
+        // TODO: this is somewhat strange that we are creating this twice...
+        this.markers = PartMarkers.createFromStartNode(this.childNodes[0]);
     }
 
     /**
-     * @param {TemplateResult} value
+     * @param {TemplateResult} templateResult
      */
-    update(value) {
-        const shouldUpdateDOM = this.parseValue(value);
+    update(templateResult) {
+        const shouldUpdateDOM = this.strings !== templateResult.strings;
         if (shouldUpdateDOM) {
-            this.processor?.(this);
+            this.parseValue(templateResult);
+            // TODO: this is a strange way of replacing the childnodes...
+            const endNode = this.childNodes[this.childNodes.length - 1];
+            // INFO: this is similar to TemplateResult#237
+            replaceNodesBetweenComments(this.markers?.endNode, getNodesBetweenComments(endNode));
         }
-        this.updateParts(value.values);
+        this.updateParts(templateResult.values);
     }
 
     /**
@@ -93,58 +82,44 @@ export class TemplatePart extends Part {
 
     /**
      * @param {TemplateResult} templateResult
-     * @return {boolean} whether the part needs to be updated in the DOM
      */
     parseValue(templateResult) {
-        if (this.strings !== templateResult.strings) {
-            let fragment = fragmentsCache.get(templateResult.strings);
-            if (!fragment) {
-                fragment = this.parseFragment(templateResult);
-                fragmentsCache.set(templateResult.strings, fragment);
-            }
-            const importedFragment = globalThis.document?.importNode(fragment, true);
-            this.childNodes = importedFragment.childNodes;
-
-            let parts = partsCache.get(templateResult.strings);
-            if (!parts) {
-                parts = templateResult.parseParts(this.childNodes);
-                partsCache.set(templateResult.strings, parts);
-            }
-
-            this.parts = parts
-                .map((part) => {
-                    // We currently need the path because the fragment will be cloned via importNode and therefore the node will be a different one
-                    part.node = part.path.reduceRight(({ childNodes }, i) => childNodes[i], this);
-                    return part;
-                })
-                .map((part, index) => {
-                    if (part.type === 'node') {
-                        return new ChildNodePart(part.node, templateResult.values[index]);
-                    }
-                    if (part.type === 'attribute') {
-                        return new AttributePart(part.node, part.name, part.initialValue);
-                    }
-                    if (part.type === 'raw-text-node') {
-                        return new RawTextNodePart(part.node, part.initialValue);
-                    }
-                    if (part.type === 'directive') {
-                        return new NodePart(part.node, templateResult.values[index]);
-                    }
-                    throw `cannot map part: ${part}`;
-                });
-            this.strings = templateResult.strings;
-            this.childNodes = [...this.childNodes];
-            return true;
+        let fragment = fragmentsCache.get(templateResult.strings);
+        if (!fragment) {
+            fragment = convertStringToTemplate(templateResult.templateString);
+            fragmentsCache.set(templateResult.strings, fragment);
         }
-        return false;
-    }
+        const importedFragment = globalThis.document?.importNode(fragment, true);
+        this.childNodes = importedFragment.childNodes;
 
-    /**
-     * @param {TemplateResult} templateResult
-     * @return {DocumentFragment}
-     */
-    parseFragment(templateResult) {
-        const templateString = templateResult.templateString;
-        return convertStringToTemplate(templateString);
+        let parts = partsCache.get(templateResult.strings);
+        if (!parts) {
+            parts = templateResult.parseParts(this.childNodes);
+            partsCache.set(templateResult.strings, parts);
+        }
+
+        this.parts = parts
+            .map((part) => {
+                // We currently need the path because the fragment will be cloned via importNode and therefore the node will be a different one
+                part.node = part.path.reduceRight(({ childNodes }, i) => childNodes[i], this);
+                return part;
+            })
+            .map((part, index) => {
+                if (part.type === 'node') {
+                    return new ChildNodePart(part.node, templateResult.values[index]);
+                }
+                if (part.type === 'attribute') {
+                    return new AttributePart(part.node, part.name, part.initialValue);
+                }
+                if (part.type === 'raw-text-node') {
+                    return new RawTextNodePart(part.node, part.initialValue);
+                }
+                if (part.type === 'directive') {
+                    return new NodePart(part.node, templateResult.values[index]);
+                }
+                throw `cannot map part: ${part}`;
+            });
+        this.strings = templateResult.strings;
+        this.childNodes = [...this.childNodes];
     }
 }

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;