@webtides/element-js 1.1.4 → 1.1.6

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@webtides/element-js",
-    "version": "1.1.4",
+    "version": "1.1.6",
     "module": "index.js",
     "main": "index.js",
     "type": "module",
@@ -37,8 +37,8 @@
     "devDependencies": {
         "@babel/eslint-parser": "^7.23.3",
         "@open-wc/testing": "^4.0.0",
-        "@web/dev-server": "^0.4.1",
-        "@web/test-runner": "^0.14.1",
+        "@web/dev-server": "^0.4.6",
+        "@web/test-runner": "^0.19.0",
         "babel-eslint": "^10.1.0",
         "eslint": "8.55.0",
         "eslint-config-prettier": "^9.1.0",

package/src/dom-parts/AttributePart.js

@@ -49,23 +49,15 @@ const processEventAttribute = (node, name) => {
  * @return {(function(*): void)|*}
  */
 const processAttribute = (node, name) => {
-    let oldValue,
-        orphan = true;
-    const attributeNode = globalThis.document?.createAttributeNS(null, name);
+    let oldValue;
     return (newValue) => {
         const value = newValue?.valueOf();
         if (oldValue !== value) {
-            if ((oldValue = value) == null) {
-                if (!orphan) {
-                    node.removeAttributeNode(attributeNode);
-                    orphan = true;
-                }
+            oldValue = value;
+            if (value == null) {
+                node.removeAttribute(name);
             } else {
-                attributeNode.value = value;
-                if (orphan) {
-                    node.setAttributeNodeNS(attributeNode);
-                    orphan = false;
-                }
+                node.setAttribute(name, value);
             }
         }
     };

package/src/dom-parts/ChildNodePart.js

@@ -3,31 +3,6 @@ import { Part } from './Part.js';
 import { TemplateResult } from './TemplateResult.js';
 import { TemplatePart } from './TemplatePart.js';
 
-/**
- * @param {Node | TemplatePart | any[]} node
- * @return {ChildNode}
- */
-const removeChildNodes = (node) => {
-    if (!Array.isArray(node) && !(node instanceof TemplatePart) && !node.hasChildNodes()) {
-        return node;
-    }
-    const range = globalThis.document?.createRange();
-    const firstChild = Array.isArray(node)
-        ? node[0]
-        : node instanceof TemplatePart
-          ? node.childNodes[0]
-          : node.firstChild;
-    const lastChild = Array.isArray(node)
-        ? node[node.length - 1]
-        : node instanceof TemplatePart
-          ? node.childNodes[node.childNodes.length - 1]
-          : node.lastChild;
-    range.setStartAfter(firstChild);
-    range.setEndAfter(lastChild);
-    range.deleteContents();
-    return firstChild;
-};
-
 /**
  * @param {Element} commentNode
  */
@@ -51,31 +26,38 @@ const removeNodesBetweenComments = (commentNode) => {
  * @return {Node[]}
  */
 const diffChildNodes = function (parentNode, domChildNodes, templateChildNodes, anchorNode) {
-    // We always want to have the two arrays (domChildNodes and templateChildNodes) to have the same length.
+    // 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 (templateChildNodes.length > domChildNodes.length) {
-        const nodesToFill = templateChildNodes.length - domChildNodes.length;
+    if (clonedTemplateChildNodes.length > clonedDomChildNodes.length) {
+        const nodesToFill = clonedTemplateChildNodes.length - clonedDomChildNodes.length;
         for (let i = 0; i < nodesToFill; i++) {
-            domChildNodes.splice(domChildNodes.length - 1, 0, undefined);
+            clonedDomChildNodes.splice(clonedDomChildNodes.length - offset, 0, undefined);
         }
     }
 
-    if (domChildNodes.length > templateChildNodes.length) {
-        const nodesToFill = domChildNodes.length - templateChildNodes.length;
+    if (clonedDomChildNodes.length > clonedTemplateChildNodes.length) {
+        const nodesToFill = clonedDomChildNodes.length - clonedTemplateChildNodes.length;
         for (let i = 0; i < nodesToFill; i++) {
-            templateChildNodes.splice(templateChildNodes.length - 1, 0, undefined);
+            clonedTemplateChildNodes.splice(clonedTemplateChildNodes.length - offset, 0, undefined);
         }
     }
 
-    const length = domChildNodes.length;
+    const length = clonedDomChildNodes.length;
     // Diff each node in the child node lists
     for (let index = 0; index < length; index++) {
-        let domChildNode = domChildNodes[index];
-        let templateChildNode = templateChildNodes[index];
+        let domChildNode = clonedDomChildNodes[index];
+        let templateChildNode = clonedTemplateChildNodes[index];
 
         // If the DOM node doesn't exist, append/copy the template node
-        if (!domChildNode) {
+        if (domChildNode === undefined) {
             if (templateChildNode instanceof TemplatePart) {
                 anchorNode.before(...templateChildNode.childNodes);
             } else if (Array.isArray(templateChildNode)) {
@@ -90,24 +72,47 @@ const diffChildNodes = function (parentNode, domChildNodes, templateChildNodes,
             continue;
         }
 
-        // If the template node doesn't exist, remove the node in the DOM
-        if (!templateChildNode) {
-            parentNode.removeChild(removeChildNodes(domChildNode));
+        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);
+            }
             continue;
         }
 
-        // If DOM node is equal to the template node, don't do anything
+        // If DOM node is equal to the template node, don't do anything in the DOM
         if (
             domChildNode === templateChildNode ||
-            (domChildNode.nodeType === COMMENT_NODE &&
-                templateChildNode.nodeType === COMMENT_NODE &&
-                domChildNode.isEqualNode(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;
             continue;
         }
 
         // Everything else is somehow different and can be replaced
-        parentNode.replaceChild(templateChildNode, domChildNode);
+        if (parentNode.contains(domChildNode)) {
+            parentNode.replaceChild(templateChildNode, domChildNode);
+        } else {
+            console.warn(
+                'This should not happen',
+                parentNode,
+                parentNode.contains(domChildNode),
+                templateChildNode,
+                domChildNode,
+            );
+        }
     }
     return templateChildNodes;
 };
@@ -119,7 +124,7 @@ const diffChildNodes = function (parentNode, domChildNodes, templateChildNodes,
  */
 export const processNodePart = (comment, initialValue) => {
     let nodes = initialValue instanceof TemplatePart ? [...initialValue.childNodes] : [];
-    let oldValue = initialValue instanceof TemplatePart ? [...initialValue.childNodes] : initialValue;
+    let oldValue = initialValue instanceof TemplatePart ? initialValue.strings : initialValue;
     // 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;
 
@@ -166,17 +171,16 @@ export const processNodePart = (comment, initialValue) => {
                     oldValue = newValue;
                     break;
                 }
-                // if the new value is a node or a fragment, and it's different from the live node, then it's diffed.
-                if (oldValue !== newValue) {
-                    if ('ELEMENT_NODE' in newValue) {
-                        oldValue = newValue;
-                        nodes = diffChildNodes(comment.parentNode, nodes, [newValue], comment);
-                    } else if (newValue instanceof TemplatePart) {
-                        oldValue = [...newValue.childNodes];
-                        nodes = diffChildNodes(comment.parentNode, nodes, [...newValue.childNodes], comment);
-                    } else {
-                        console.warn('Could not process value', 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':
@@ -275,7 +279,9 @@ export class ChildNodePart extends Part {
             this.updateParts(value);
         }
 
-        this.processor?.(parsedValue);
+        if (!(value instanceof TemplateResult)) {
+            this.processor?.(parsedValue);
+        }
     }
 
     /**
@@ -324,6 +330,7 @@ export class ChildNodePart extends Part {
             let value = values[index];
 
             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];
                 if (!templatePart) {
                     const templatePartCommentNodes = this.childNodes?.filter(

package/src/dom-parts/TemplateResult.js

@@ -1,4 +1,4 @@
-import { COMMENT_NODE, getNodePath } from '../util/DOMHelper.js';
+import { COMMENT_NODE, getNodePath, encodeHTML } from '../util/DOMHelper.js';
 import { encodeAttribute, isObjectLike } from '../util/AttributeParser.js';
 import { TemplatePart } from './TemplatePart.js';
 
@@ -8,18 +8,35 @@ const elements = /<([a-z]+[a-z0-9:._-]*)([^>]*?)(\/?)>/g;
 // TODO: v this will not match any values with escaped quotes like onClick='console.log("\'test")'
 const attributes = /([^\s]*)=((?:")[^"]*(?:")|(?:')[^']*(?:')|[^\s\/>]*)|([^\s\/>]*)/g;
 const partPositions = /[\x01\x02]/g;
+const ssrPlaceholder = /{{dom-part\?(.*?)}}/g;
 // \x01 Node.ELEMENT_NODE
 // \x02 Node.ATTRIBUTE_NODE
 // \x03 COMMENT.ATTRIBUTE_TOKEN
 // \x04 Node.ATTRIBUTE_TOKEN
 
-const ssrPlaceholder = /{{dom-part\?(.*?)}}/g;
-function makeSSRPlaceholder(type, params) {
+/**
+ * Creates a URL query string for meta information to pass along ssr part placeholders
+ * @param type
+ * @param params
+ * @return {string}
+ */
+function makeSSRPlaceholderParams(type, params) {
     const urlSearchParams = new URLSearchParams({ type, ...params });
     const queryString = urlSearchParams.toString();
     return `{{dom-part?${queryString}}}`;
 }
 
+/**
+ * Creates a URL query string for meta information to pass along part comments
+ * @param {string} type
+ * @param {{}} params
+ * @return {string}
+ */
+function makePartParams(type, params) {
+    const urlSearchParams = new URLSearchParams({ type, ...params });
+    return urlSearchParams.toString();
+}
+
 /**
  * Given a template, find part positions as both nodes and attributes and
  * return a string with placeholders as either comment nodes or named attributes.
@@ -41,9 +58,10 @@ export const createTemplateString = (templateStrings, ssr = false) => {
             if (directive && directive === '\x01') {
                 elementTagWithAttributes = elementTagWithAttributes.replace(
                     attribute,
-                    ssr ? makeSSRPlaceholder('directive') : '',
+                    ssr ? makeSSRPlaceholderParams('directive') : '',
                 );
-                return `<!--\x02$-->`;
+                const params = makePartParams('directive');
+                return `<!--\x02?${params}-->`;
             }
 
             // remove quotes from attribute value to normalize the value
@@ -53,19 +71,22 @@ export const createTemplateString = (templateStrings, ssr = false) => {
             const partsCount = (attribute.match(/\x01/g) || []).length;
             const parts = [];
             for (let index = 0; index < partsCount; index++) {
-                // TODO: maybe we could use url parameters here?! -> ?type=attribute&name=${name}&initialValue=${initialValue}
-                parts.push(`<!--\x02:${name}=${value.replaceAll('\x01', '\x03')}-->`);
+                const params = makePartParams('attribute', {
+                    name,
+                    initialValue: value.replaceAll('\x01', '\x03'),
+                });
+                parts.push(`<!--\x02?${params}-->`);
             }
 
             if (parts.length > 0) {
                 let replacement = '';
                 if (ssr) {
                     for (let index = 0; index < partsCount - 1; index++) {
-                        replacement = replacement + makeSSRPlaceholder('noop');
+                        replacement = replacement + makeSSRPlaceholderParams('noop');
                     }
                     replacement =
                         replacement +
-                        makeSSRPlaceholder('attribute', {
+                        makeSSRPlaceholderParams('attribute', {
                             name,
                             interpolations: partsCount,
                             initialValue: value.replaceAll('\x01', '\x03'),
@@ -110,19 +131,19 @@ export const createTemplateString = (templateStrings, ssr = false) => {
         const partsCount = (content.match(/\x01/g) || []).length;
         const parts = [];
         for (let index = 0; index < partsCount; index++) {
-            // TODO: maybe we could use url parameters here?! -> ?type=raw-text-node&initialValue=${initialValue}
-            parts.push(`<!--\x02/raw-text-node=${content.replaceAll('\x01', '\x03')}-->`);
+            const params = makePartParams('raw-text-node', {
+                initialValue: content.replaceAll('\x01', '\x03'),
+            });
+            parts.push(`<!--\x02?${params}-->`);
         }
-        const parsedContent = content.replaceAll('\x01', ssr ? makeSSRPlaceholder('raw-text-node') : '');
+        const parsedContent = content.replaceAll('\x01', ssr ? makeSSRPlaceholderParams('raw-text-node') : '');
         return `${parts.join('')}<${tag}${attributes}>${parsedContent}</${tag}>`;
     });
     // replace interpolation placeholders with our indexed markers
     template = template.replace(partPositions, (partPosition) => {
         if (partPosition === '\x01') {
-            if (ssr) {
-                return `<!--dom-part-${partIndex}-->${makeSSRPlaceholder('node')}<!--/dom-part-${partIndex++}-->`;
-            }
-            return `<!--dom-part-${partIndex}--><!--/dom-part-${partIndex++}-->`;
+            const placeholder = ssr ? makeSSRPlaceholderParams('node') : '';
+            return `<!--dom-part-${partIndex}-->${placeholder}<!--/dom-part-${partIndex++}-->`;
         } else if (partPosition === '\x02') {
             return `dom-part-${partIndex++}`;
         }
@@ -149,7 +170,7 @@ const attribute = (name, value, quotes = '"') => {
 const getValue = (value) => {
     switch (typeof value) {
         case 'string':
-            return encodeAttribute(value);
+            return encodeHTML(value);
         case 'boolean':
         case 'number':
             return String(value);
@@ -170,7 +191,7 @@ const getValue = (value) => {
         case 'function':
             return getValue(value());
     }
-    return value == null ? '' : encodeAttribute(String(value));
+    return value == null ? '' : encodeHTML(String(value));
 };
 
 /** @type {Map<TemplateStringsArray, string>} */
@@ -196,14 +217,18 @@ export class TemplateResult {
      * @param {Element} domNode
      */
     renderInto(domNode) {
-        let serverSideRendered = false;
+        const startNode = Array.from(domNode.childNodes)
+            .filter((node) => node.nodeType === COMMENT_NODE)
+            .find((node) => node.data === 'template-part');
+
+        let serverSideRendered = startNode !== undefined;
+
         let templatePart = templatePartsCache.get(domNode);
-        if (!templatePart) {
-            const startNode = Array.from(domNode.childNodes)
-                .filter((node) => node.nodeType === COMMENT_NODE)
-                .find((node) => node.data === 'template-part');
 
-            serverSideRendered = startNode !== undefined;
+        if (!templatePart || !startNode) {
+            if (!startNode) {
+                domNode.replaceChildren();
+            }
 
             templatePart = new TemplatePart(startNode, this);
             templatePartsCache.set(domNode, templatePart);
@@ -378,29 +403,32 @@ export class TemplateResult {
                 parts.push({ type: 'node', path: getNodePath(node) });
                 continue;
             }
-            if (/^dom-part-\d+:/.test(node.data)) {
-                const [_, ...attribute] = node.data.split(':');
-                const [name, ...initialValue] = attribute.join(':').split('=');
+            if (/^dom-part-\d+\?type=attribute&(.*?)$/.test(node.data)) {
+                // For html`<div id="${'foo'}" class="${'bar'}"></div>` we will get:
+                // <!--dom-part-0?type=attribute&name=id&initialValue=\x03--><!--dom-part-1?type=attribute&name=class&initialValue=\x03-->
+                const [_, paramsString] = node.data.split('?');
+                const searchParams = new URLSearchParams(paramsString);
                 parts.push({
                     type: 'attribute',
                     path: getNodePath(node),
-                    name: name,
-                    initialValue: initialValue.join('='),
+                    name: searchParams.get('name'),
+                    initialValue: searchParams.get('initialValue'),
                 });
                 continue;
             }
-            if (/^dom-part-\d+\/raw-text-node/.test(node.data)) {
+            if (/^dom-part-\d+\?type=raw-text-node&(.*?)$/.test(node.data)) {
                 // For html`<textarea>${'foo'} bar</textarea>` we will get:
-                // <!--dom-part-0/raw-text-node=\x03 bar-->
-                const [_, ...initialValue] = node.data.split('=');
+                // <!--dom-part-0?type=raw-text-node&initialValue=\x03 bar-->
+                const [_, paramsString] = node.data.split('?');
+                const searchParams = new URLSearchParams(paramsString);
                 parts.push({
                     type: 'raw-text-node',
                     path: getNodePath(node),
-                    initialValue: initialValue.join('='),
+                    initialValue: searchParams.get('initialValue'),
                 });
                 continue;
             }
-            if (/^dom-part-\d+\$/.test(node.data)) {
+            if (/^dom-part-\d+\?type=directive$/.test(node.data)) {
                 parts.push({ type: 'directive', path: getNodePath(node) });
             }
         }

package/src/util/AttributeParser.js

@@ -125,29 +125,23 @@ export function camelToDash(string) {
 }
 
 /**
- * Decodes an attribute.
+ * Decodes an attribute according to {@link https://html.spec.whatwg.org/multipage/syntax.html#attributes-2}
  * @param {string} attribute
  * @returns {string}
  */
 export function decodeAttribute(attribute) {
-    return `${attribute}`
-        .replace(/&lt;/g, '<')
-        .replace(/&gt;/g, '>')
-        .replace(/&quot;/g, '"')
-        .replace(/&apos;/g, "'");
+    return `${attribute}`.replace(/&quot;/g, '"').replace(/&amp;/g, '&');
 }
 
 /**
- * Encodes an attribute.
+ * Encodes an attribute according to {@link https://html.spec.whatwg.org/multipage/syntax.html#attributes-2}
  * @param {string} attribute
  * @returns {string}
  */
 export function encodeAttribute(attribute) {
     return `${attribute}`
-        .replace(/'/g, '&apos;')
+        .replace(/&/g, '&amp;')
         .replace(/"/g, '&quot;')
-        .replace(/</g, '&lt;')
-        .replace(/>/g, '&gt;')
         .replace(/\r\n/g, '\n')
         .replace(/[\r\n]/g, '\n');
 }

package/src/util/DOMHelper.js

@@ -305,3 +305,33 @@ export const diffNodes = function (templateNode, domNode, shouldDiffChildNodes =
         }
     }
 };
+
+/**
+ * Decodes a html string
+ * @param {string} html
+ * @returns {string}
+ */
+export function decodeHTML(html) {
+    return `${html}`
+        .replace(/&/g, '&')
+        .replace(/&lt;/g, '<')
+        .replace(/&gt;/g, '>')
+        .replace(/&quot;/g, '"')
+        .replace(/&apos;/g, "'");
+}
+
+/**
+ * Encodes a html string
+ * @param {string} html
+ * @returns {string}
+ */
+export function encodeHTML(html) {
+    return `${html}`
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&apos;')
+        .replace(/\r\n/g, '\n')
+        .replace(/[\r\n]/g, '\n');
+}

package/CHANGELOG.md

@@ -1,396 +0,0 @@
-# Change Log
-
-All notable changes to this project will be documented in this file.
-
-The format is based on [Keep a Changelog](http://keepachangelog.com/) and this project adheres
-to [Semantic Versioning](http://semver.org/).
-
-<!--
-   PRs should document their user-visible changes (if any) in the
-   Unreleased section, uncommenting the header as necessary.
--->
-
-<!-- ## Unreleased -->
-<!-- ### Added -->
-<!-- ### Changed -->
-<!-- ### Removed -->
-<!-- ### Fixed -->
-
-## [1.1.4] - 2024-11-12
-
-### FIXED
-
-- Fixed rendering interpolations inside textarea nodes ([#133](https://github.com/webtides/element-js/issues/133))
-
-## [1.1.3] - 2024-11-11
-
-### FIXED
-
-- Fixed unsafeHtml having more than one child ([#135](https://github.com/webtides/element-js/issues/135))
-- Fixed early returns from templates and fixes static html changes not reflecting to DOM ([#132](https://github.com/webtides/element-js/issues/132))
-
-
-## [1.1.2] - 2024-10-30
-
-### FIXED
-
-- Fixed rerendering of templates that were initially null, prevent runtime errors
-
-## [1.1.1] - 2024-09-16
-
-### FIXED
-
-- Fixed base url and css rules order in adopted style sheets.
-- Fixed randomUUID not being available in unsecure hosts (like localhost) by adding a helper function
-
-## [1.1.0] - 2024-06-24
-
-### Added
-
-- Added `optionalAttribute` directive to conditionally render attributes (plus value)
-
-### FIXED
-
-- Fixed `spreadAttributes` to not render "null|undefined|NaN" to the attributes value but removing the entire attribute
-  when such values are passed.
-
-## [1.0.0] - 2024-05-24
-
-### Added
-
-- Added our own versions of directives and template helpers ([#67](https://github.com/webtides/element-js/pull/67))
-- Added JSDocs for everything in the codebase. This will especially be helpful when using constructor options.
-- Added state serialization. This improves hydration from SSR a
-  lot. ([#106](https://github.com/webtides/element-js/pull/106))
-- added declarative shadow dom rendering for template elements
-
-### Changed
-
-- _BREAKING_ Uses a new custom renderer for the `TemplateElement`. It replaces the old `lit-html` renderer. The API and
-  usage should be exactly the same. The only thing to do/change is the use of the old `lit-html` directives. For
-  detailed instructions see the upgrade guide. ([#67](https://github.com/webtides/element-js/pull/67))
-- _BREAKING_ `element-js` will now also trigger the `afterUpdate` hook right after the `connected` hook. This is to
-  reduce the cases where you had to do the same things in `connected` and `afterUpdate`. You can now remove those
-  duplicate calls from the `connected` hook. ([#60](https://github.com/webtides/element-js/pull/60))
-- _BREAKING_ Changed `package.json` type to `module`. This should hopefully not break anything. `element-js` is either
-  used directly from the browser or through a bundler. In both cases the added type: module should not
-  matter. ([#64](https://github.com/webtides/element-js/pull/64))
-- _BRAKING_ Changed the default options when using the `dispatch` helper function. `bubbles`, `cancelable`
-  and `composed` will now be `true` by default.
-- _BRAKING_ Changed adopting global styles to include ALL global styles. Previously only one inline <style> with the ID
-  of '#globalStyles' would be adopted. For more information see the docs.
-
-### Removed
-
-- _BREAKING_ Removed the `lit-html` dependency. `element-js` is now officially dependency
-  free! ([#67](https://github.com/webtides/element-js/pull/67))
-- _BREAKING_ Removed the deprecated `BaseElement` constructor option `childListUpdate`. Please use the "
-  mutationObserverOptions" dictionary instead. See the docs for more
-  info. ([#99](https://github.com/webtides/element-js/pull/99))
-- _BREAKING_ Removed the `hooks` map in the `BaseElement`. Using the hooks() map for lifecycle hooks is deprecated!
-  Please overwrite the existing lifecycle hook functions. See the docs for more
-  info. ([#99](https://github.com/webtides/element-js/pull/99))
-- _BREAKING_ Removed the `computed` map in the `BaseElement`. Using the computed() map for computed properties is
-  deprecated! Please use regular JS getters and return the computed value. See the docs for more
-  info. ([#99](https://github.com/webtides/element-js/pull/99))
-- _BREAKING_ Removed all occurrences of `ShadyCSS`
-  in `StyledElement`. ([#99](https://github.com/webtides/element-js/pull/99))
-- _BRAKING_ Removed the `i18n` helper function. See CHANGELOG how to implement it yourself or use a third party library.
-
-## [1.0.0-alpha.13] - 2024-05-08
-
-### Fixed
-
-- catch security errors when `GlobalStylesStore` tries to read css rules from cross-origin stylesheets.
-
-## [1.0.0-alpha.12] - 2024-03-03
-
-### Added
-
-- added declarative shadow dom rendering for template elements
-
-### Fixed
-
-- fixed issues with whitespace being returned untrimmed in a template result
-
-## [1.0.0-alpha.11] - 2024-03-13
-
-### Fixed
-
-- fixed missing return type `string` for the `template()` function in `TemplateElement`
-- fixed types for the `propertyOptions` option in `BaseElement`
-
-## [1.0.0-alpha.10] - 2024-02-20
-
-### Fixed
-
-- fixed unsafeHTML not rendering anything when toString was called
-- fixed using = sign in attribute positions with interpolations
-- fixed rendering null values in node part positions in SSR
-- fixed missing .js file extensions
-
-## [1.0.0-alpha.9] - 2024-01-05
-
-### Changed
-
-- moved DOM methods into connected callbacks to make it safe for the elements to be created in SSR environments
-
-## [1.0.0-alpha.8] - 2024-01-04
-
-### Fixed
-
-- fixed ChildNodePart not replacing dom nodes from unsafeHTML
-
-## [1.0.0-alpha.7] - 2023-12-19
-
-### Fixed
-
-- fixed wrong attribute parts for the same name on different elements
-
-## [1.0.0-alpha.6] - 2023-12-18
-
-### Fixed
-
-- fixed hyphens in attribute names being split in SSR mode
-
-## [1.0.0-alpha.5] - 2023-12-07
-
-### Added
-
-- Added the /docs directory to the files array in package.json
-- Added part instances as \_\_part to comment nodes
-
-### Fixed
-
-- fixed escaped unsafeHTML in SSR mode
-
-## [1.0.0-alpha.4] - 2023-12-01
-
-### Fixed
-
-- falsy creation of directive parts for non-directive attributes
-- creating parts with wrong comment marker positions
-
-## [1.0.0-alpha.3] - 2023-12-01
-
-### Added
-
-- Added state serialization. This improves hydration from SSR a
-  lot. ([#106](https://github.com/webtides/element-js/pull/106))
-
-### Changed
-
-- _BRAKING_ Changed the default options when using the `dispatch` helper function. `bubbles`, `cancelable`
-  and `composed` will now be `true` by default.
-- _BRAKING_ Changed adopting global styles to include ALL global styles. Previously only one inline <style> with the ID
-  of '#globalStyles' would be adopted. For more information see the docs.
-
-### Removed
-
-- _BRAKING_ Removed `i18n` helper function. See CHANGELOG how to implement it yourself or use a third party library.
-
-## [1.0.0-alpha.2] - 2023-08-23
-
-### Added
-
-- Added JSDocs for everything in the codebase. This will especially be helpful when using constructor options.
-
-## [1.0.0-alpha.1] - 2023-08-15
-
-### Added
-
-- Added our own versions of directives and template helpers ([#67](https://github.com/webtides/element-js/pull/67))
-
-### Changed
-
-- _BRAKING_ Uses a new custom renderer for the `TemplateElement`. It replaces the old `lit-html` renderer. The API and
-  usage should be exactly the same. The only thing to do/change is the use of the old `lit-html` directives. For
-  detailed instructions see the upgrade guide. ([#67](https://github.com/webtides/element-js/pull/67))
-- _BREAKING_ `element-js` will now also trigger the `afterUpdate` hook right after the `connected` hook. This is to
-  reduce the cases where you had to do the same things in `connected` and `afterUpdate`. You can now remove those
-  duplicate calls from the `connected` hook. ([#60](https://github.com/webtides/element-js/pull/60))
-- _BREAKING_ Changed `package.json` type to `module`. This should hopefully not break anything. `element-js` is either
-  used directly from the browser or through a bundler. In both cases the added type: module should not
-  matter. ([#64](https://github.com/webtides/element-js/pull/64))
-
-### Removed
-
-- _BREAKING_ Removed the `lit-html` dependency. `element-js` is now officially dependency
-  free! ([#67](https://github.com/webtides/element-js/pull/67))
-- _BREAKING_ Removed the deprecated `BaseElement` constructor option `childListUpdate`. Please use the "
-  mutationObserverOptions" dictionary instead. See the docs for more
-  info. ([#99](https://github.com/webtides/element-js/pull/99))
-- _BREAKING_ Removed the `hooks` map in the `BaseElement`. Using the hooks() map for lifecycle hooks is deprecated!
-  Please overwrite the existing lifecycle hook functions. See the docs for more
-  info. ([#99](https://github.com/webtides/element-js/pull/99))
-- _BREAKING_ Removed the `computed` map in the `BaseElement`. Using the computed() map for computed properties is
-  deprecated! Please use regular JS getters and return the computed value. See the docs for more
-  info. ([#99](https://github.com/webtides/element-js/pull/99))
-- _BREAKING_ Removed all occurrences of `ShadyCSS`
-  in `StyledElement`. ([#99](https://github.com/webtides/element-js/pull/99))
-
-## [0.7.4] - 2023-11-24
-
-### Added
-
-- storeception (reactive store properties in parent stores)
-- context injection in shadow elements requests travel though shadow roots
-- defer element connection (disables client side code until called manually)
-
-### Fixed
-
-- late context injection if parent mounts after child (loading order)
-- stores updating elements that want to be updated
-
-## [0.7.3] - 2023-03-07
-
-### Fixed
-
-- last release was tagged wrong
-
-## [0.7.2] - 2023-03-03
-
-### Fixed
-
-- watcher callbacks for injected stores
-
-## [0.7.1] - 2023-03-03
-
-### Added
-
-- Elements are now able to watch Stores
-
-### Fixed
-
-- Injection of falsy values
-
-## [0.7.0] - 2023-02-13
-
-### Added
-
-- Dependency Injection via Context Protocol 💉
-- Provide reactive Properties or entire Stores via: provideProperties() { return { name : value}}
-- Inject / Request them via injectProperties() { return { name : 'defaultValue'}}
-
-### Changed
-
-- docs structure
-
-### Fixed
-
-- Cannot re-render slotted light dom when using the vanilla renderer https://github.com/webtides/element-js/issues/76
-- adds Vanilla Renderer Tests
-
-## [0.6.2] - 2022-11-18
-
-### FIXED
-
-- Store always switching to singleProperty Mode if constructed without any arguments.
-
-## [0.6.1] - 2022-11-18
-
-### ADDED
-
-- Store watch() map to control internal store state scope
-
-## [0.6.0] - 2022-11-17
-
-### ADDED
-
-- StoreProperty for shared application state
-- Directives for Vanilla Renderer
-
-## [0.5.0] - 2022-09-13
-
-### Changed
-
-- improved the performance of the vanilla-renderer
-
-### Removed
-
-- setting attributes as properties during dom diffing for the vanilla renderer. This is potentially a **breaking**
-  change if you used attributes with the "." (dot) notation
-
-## [0.4.3] - 2022-07-06
-
-### ADDED
-
-- parse option to propertyOptions that can be either a boolean OR a function for custom parsing
-- enhance reflect option in propertyOptions that it can also be a function for custom reflection
-
-## [0.4.2] - 2022-02-03
-
-### Fixed
-
-- vanilla-renderer: fixes attribute comparsion
-
-## [0.4.1] - 2022-02-01
-
-### Fixed
-
-- refs="id[]" indexing keys not nodes _rolleyes_
-
-### Added
-
-- refs="id[]" aka possibbility to refrence a list of nodes to the $refs map.
-
-## [0.4.0] - 2022-01-28
-
-### Added
-
-- a "vanilla" renderer with support for hydration and no dependencies
-
-### Changed
-
-- uses new @web/test-runner isntead of karma (#27)
-
-## [0.3.3] - 2021-09-22
-
-### Added
-
-- optional complex event callback notation to support addEventListener options (i.E. for passive Event Listeners )
-- Example: {listener: () => {}, options: { passive: true } }
-- docs
-- tests
-
-## [0.3.2] - 2021-03-09
-
-### Added
-
-- bundled version of `element-js` to use from a CDN and be able to prototype in tools like CodePen etc.
-
-## [0.3.1] - 2020-12-08
-
-### Fixed
-
-- i18n fallback values
-
-### Added
-
-- i18n tests
-
-## [0.3.0] - 2020-07-27
-
-### Added
-
-- first batch/draft of the documentation
-- property/attribute reflection via constructor options (see the [Documentation](/docs/README.md#propertyoptions) for
-  more info)
-- mutationObserverOptions to enable observing subtree mutations (see
-  the [Documentation](/docs/README.md#mutationobserveroptions) for more info)
-
-### Removed
-
-- `childListUpdate` constructor option has been deprecated and will be removed before `1.0`
-
-## [0.2.0] - 2020-07-01
-
-### Changed
-
-- uses shady-render instead of render from `lit-html` for rendering templates to be compatible with the shady-css
-  polyfill
-- refactored and simplified `StyledElement`s handling/loading of style sheets
-
-## [0.1.0] - 2020-06-26
-
-- initial release