@schukai/monster 3.65.20 → 3.65.21

package/CHANGELOG.md

@@ -2,55 +2,21 @@
 
 
 
-## [3.65.20] - 2024-06-20
-
-### Bug Fixes
-
-- wip new pipeline
-- wip new pipeline
-
-
-
-## [3.65.19] - 2024-06-20
-
-### Bug Fixes
-
-- wip new pipeline
-
-
-
-## [3.65.18] - 2024-06-20
-
-### Bug Fixes
-
-- wip new pipeline
-
-
-
-## [3.65.17] - 2024-06-20
-
-### Bug Fixes
-
-- wip new pipeline
-
-
-
-## [3.65.16] - 2024-06-20
+## [3.65.21] - 2024-06-20
 
 ### Bug Fixes
 
-- wip new pipeline
+- exchange of document.selector with function findElementWithSelectorUpwards [#199](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/199)
 
+## [3.65.20] - 2024-06-20
 
-
-## [3.65.15] - 2024-06-20
-
+- Changeover to new release process
 
 ## [3.65.3] - 2024-06-19
 
 ### Bug Fixes
 
-- switch nodejs_22 to nodejs_20
+- switch nodejs_22 to nodejs_20 (segmentation fault)
 
 ## [3.65.1] - 2024-06-17
 

package/package.json

@@ -1 +1 @@
-{"author":"schukai GmbH","dependencies":{"@floating-ui/dom":"^1.6.5","@popperjs/core":"^2.11.8"},"description":"Monster is a simple library for creating fast, robust and lightweight websites.","homepage":"https://monsterjs.org/","keywords":["framework","web","dom","css","sass","mobile-first","app","front-end","templates","schukai","core","shopcloud","alvine","monster","buildmap","stack","observer","observable","uuid","node","nodelist","css-in-js","logger","log","theme"],"license":"AGPL 3.0","main":"source/monster.mjs","module":"source/monster.mjs","name":"@schukai/monster","repository":{"type":"git","url":"https://gitlab.schukai.com/oss/libraries/javascript/monster.git"},"type":"module","version":"3.65.20"}
+{"author":"schukai GmbH","dependencies":{"@floating-ui/dom":"^1.6.5","@popperjs/core":"^2.11.8"},"description":"Monster is a simple library for creating fast, robust and lightweight websites.","homepage":"https://monsterjs.org/","keywords":["framework","web","dom","css","sass","mobile-first","app","front-end","templates","schukai","core","shopcloud","alvine","monster","buildmap","stack","observer","observable","uuid","node","nodelist","css-in-js","logger","log","theme"],"license":"AGPL 3.0","main":"source/monster.mjs","module":"source/monster.mjs","name":"@schukai/monster","repository":{"type":"git","url":"https://gitlab.schukai.com/oss/libraries/javascript/monster.git"},"type":"module","version":"3.65.21"}

package/source/components/datatable/change-button.mjs

@@ -20,6 +20,7 @@ import {
 	CustomElement,
 	registerCustomElement,
 } from "../../dom/customelement.mjs";
+import {findElementWithSelectorUpwards} from "../../dom/util.mjs";
 import { isString } from "../../types/is.mjs";
 import { State } from "../form/types/state.mjs";
 import "../form/state-button.mjs";
@@ -189,12 +190,12 @@ function initControlReferences() {
 	const selector = this.getOption("dataset.selector");
 
 	if (isString(selector)) {
-		const elements = document.querySelectorAll(selector);
-		if (elements.length !== 1) {
+
+		const element = findElementWithSelectorUpwards( this,selector);
+		if (element===null) {
 			throw new Error("the selector must match exactly one element");
 		}
 
-		const element = elements[0];
 		if (!(element instanceof HTMLElement)) {
 			throw new TypeError("the element must be a dataset");
 		}
@@ -205,12 +206,11 @@ function initControlReferences() {
 	const selector2 = this.getOption("overlay.selector");
 
 	if (isString(selector2)) {
-		const elements = document.querySelectorAll(selector2);
-		if (elements.length !== 1) {
+		const element = findElementWithSelectorUpwards( this,selector);
+		if (element===null) {
 			throw new Error("the selector must match exactly one element");
 		}
 
-		const element = elements[0];
 		if (!(element instanceof HTMLElement)) {
 			throw new TypeError("the element must be a overlay");
 		}

package/source/components/datatable/dataset.mjs

@@ -12,32 +12,33 @@
  * SPDX-License-Identifier: AGPL-3.0
  */
 
-import { instanceSymbol, internalSymbol } from "../../constants.mjs";
-import { Pathfinder } from "../../data/pathfinder.mjs";
-import { getLinkedObjects, hasObjectLink } from "../../dom/attributes.mjs";
-import { customElementUpdaterLinkSymbol } from "../../dom/constants.mjs";
+import {instanceSymbol, internalSymbol} from "../../constants.mjs";
+import {Pathfinder} from "../../data/pathfinder.mjs";
+import {getLinkedObjects, hasObjectLink} from "../../dom/attributes.mjs";
+import {customElementUpdaterLinkSymbol} from "../../dom/constants.mjs";
 import {
-	assembleMethodSymbol,
-	CustomElement,
-	attributeObserverSymbol,
-	registerCustomElement,
+    assembleMethodSymbol,
+    CustomElement,
+    attributeObserverSymbol,
+    registerCustomElement,
 } from "../../dom/customelement.mjs";
-import { isString } from "../../types/is.mjs";
-import { Observer } from "../../types/observer.mjs";
-import { clone } from "../../util/clone.mjs";
+import {findElementWithSelectorUpwards} from "../../dom/util.mjs";
+import {isString} from "../../types/is.mjs";
+import {Observer} from "../../types/observer.mjs";
+import {clone} from "../../util/clone.mjs";
 import {
-	ATTRIBUTE_DATASOURCE_SELECTOR,
-	ATTRIBUTE_DATATABLE_INDEX,
+    ATTRIBUTE_DATASOURCE_SELECTOR,
+    ATTRIBUTE_DATATABLE_INDEX,
 } from "./constants.mjs";
-import { Datasource } from "./datasource.mjs";
-import { DatasetStyleSheet } from "./stylesheet/dataset.mjs";
+import {Datasource} from "./datasource.mjs";
+import {DatasetStyleSheet} from "./stylesheet/dataset.mjs";
 import {
-	handleDataSourceChanges,
-	datasourceLinkedElementSymbol,
+    handleDataSourceChanges,
+    datasourceLinkedElementSymbol,
 } from "./util.mjs";
-import { FormStyleSheet } from "../stylesheet/form.mjs";
+import {FormStyleSheet} from "../stylesheet/form.mjs";
 
-export { DataSet };
+export {DataSet};
 
 /**
  * The data set component is used to show the data of a data source.
@@ -78,185 +79,184 @@ export { DataSet };
  * @summary A data set
  */
 class DataSet extends CustomElement {
-	/**
-	 * This method is called by the `instanceof` operator.
-	 * @returns {symbol}
-	 */
-	static get [instanceSymbol]() {
-		return Symbol.for("@schukai/monster/components/dataset@@instance");
-	}
-
-	/**
-	 * This method determines which attributes are to be monitored by `attributeChangedCallback()`.
-	 *
-	 * @return {string[]}
-	 * @since 1.15.0
-	 */
-	static get observedAttributes() {
-		const attributes = super.observedAttributes;
-		attributes.push(ATTRIBUTE_DATATABLE_INDEX);
-		return attributes;
-	}
-
-	/**
-	 * To set the options via the html tag the attribute `data-monster-options` must be used.
-	 * @see {@link https://monsterjs.org/en/doc/#configurate-a-monster-control}
-	 *
-	 * The individual configuration values can be found in the table.
-	 *
-	 * @property {Object} templates Template definitions
-	 * @property {string} templates.main Main template
-	 * @property {object} datasource The datasource
-	 * @property {string} datasource.selector The selector of the datasource
-	 * @property {object} mapping The mapping
-	 * @property {string} mapping.data The data
-	 * @property {number} mapping.index The index
-	 * @property {Array} data The data
-	 */
-	get defaults() {
-		const obj = Object.assign({}, super.defaults, {
-			templates: {
-				main: getTemplate(),
-			},
-
-			datasource: {
-				selector: null,
-			},
-
-			mapping: {
-				data: "dataset",
-				index: 0,
-			},
-
-			data: {},
-		});
-
-		updateOptionsFromArguments.call(this, obj);
-		return obj;
-	}
-
-	/**
-	 *
-	 * @return {string}
-	 */
-	static getTag() {
-		return "monster-dataset";
-	}
-
-	write() {
-		return new Promise((resolve, reject) => {
-			if (!this[datasourceLinkedElementSymbol]) {
-				reject(new Error("No datasource"));
-				return;
-			}
-
-			const internalUpdateCloneData = this.getInternalUpdateCloneData();
-			if (!internalUpdateCloneData) {
-				reject(new Error("No update data"));
-				return;
-			}
-
-			const internalData = internalUpdateCloneData?.["data"];
-			if (
-				internalData === undefined ||
-				internalData === null ||
-				internalData === ""
-			) {
-				reject(new Error("No data"));
-				return;
-			}
-
-			setTimeout(() => {
-				const path = this.getOption("mapping.data");
-				const index = this.getOption("mapping.index");
-
-				let pathWithIndex;
-
-				if (isString(path) && path !== "") {
-					pathWithIndex = path + "." + index;
-				} else {
-					pathWithIndex = index;
-				}
-
-				const data = this[datasourceLinkedElementSymbol].data;
-				const unref = JSON.stringify(data);
-				const ref = JSON.parse(unref);
-
-				new Pathfinder(ref).setVia(pathWithIndex, internalData);
-
-				this[datasourceLinkedElementSymbol].data = ref;
-
-				resolve();
-			}, 0);
-		});
-	}
-
-	/**
-	 * This method is responsible for assembling the component.
-	 *
-	 * It calls the parent's assemble method first, then initializes control references and event handlers.
-	 * If the `datasource.selector` option is provided and is a string, it searches for the corresponding
-	 * element in the DOM using that selector.
-	 *
-	 * If the selector matches exactly one element, it checks if the element is an instance of the `Datasource` class.
-	 *
-	 * If it is, the component's `datasourceLinkedElementSymbol` property is set to the element, and the component
-	 * attaches an observer to the datasource's changes.
-	 *
-	 * The observer is a function that calls the `handleDataSourceChanges` method in the context of the component.
-	 * Additionally, the component attaches an observer to itself, which also calls the `handleDataSourceChanges`
-	 * method in the component's context.
-	 */
-	[assembleMethodSymbol]() {
-		super[assembleMethodSymbol]();
-
-		// initControlReferences.call(self);
-		initEventHandler.call(this);
-
-		const selector = this.getOption("datasource.selector");
-
-		if (isString(selector)) {
-			const elements = document.querySelectorAll(selector);
-			if (elements.length !== 1) {
-				throw new Error("the selector must match exactly one element");
-			}
-
-			const element = elements[0];
-			if (!(element instanceof Datasource)) {
-				throw new TypeError("the element must be a datasource");
-			}
-
-			this[datasourceLinkedElementSymbol] = element;
-			element.datasource.attachObserver(
-				new Observer(handleDataSourceChanges.bind(this)),
-			);
-		}
-
-		this.attachObserver(
-			new Observer(() => {
-				handleDataSourceChanges.call(this);
-			}),
-		);
-	}
-
-	/**
-	 * @return [CSSStyleSheet]
-	 */
-	static getCSSStyleSheet() {
-		return [FormStyleSheet, DatasetStyleSheet];
-	}
+    /**
+     * This method is called by the `instanceof` operator.
+     * @returns {symbol}
+     */
+    static get [instanceSymbol]() {
+        return Symbol.for("@schukai/monster/components/dataset@@instance");
+    }
+
+    /**
+     * This method determines which attributes are to be monitored by `attributeChangedCallback()`.
+     *
+     * @return {string[]}
+     * @since 1.15.0
+     */
+    static get observedAttributes() {
+        const attributes = super.observedAttributes;
+        attributes.push(ATTRIBUTE_DATATABLE_INDEX);
+        return attributes;
+    }
+
+    /**
+     * To set the options via the html tag the attribute `data-monster-options` must be used.
+     * @see {@link https://monsterjs.org/en/doc/#configurate-a-monster-control}
+     *
+     * The individual configuration values can be found in the table.
+     *
+     * @property {Object} templates Template definitions
+     * @property {string} templates.main Main template
+     * @property {object} datasource The datasource
+     * @property {string} datasource.selector The selector of the datasource
+     * @property {object} mapping The mapping
+     * @property {string} mapping.data The data
+     * @property {number} mapping.index The index
+     * @property {Array} data The data
+     */
+    get defaults() {
+        const obj = Object.assign({}, super.defaults, {
+            templates: {
+                main: getTemplate(),
+            },
+
+            datasource: {
+                selector: null,
+            },
+
+            mapping: {
+                data: "dataset",
+                index: 0,
+            },
+
+            data: {},
+        });
+
+        updateOptionsFromArguments.call(this, obj);
+        return obj;
+    }
+
+    /**
+     *
+     * @return {string}
+     */
+    static getTag() {
+        return "monster-dataset";
+    }
+
+    write() {
+        return new Promise((resolve, reject) => {
+            if (!this[datasourceLinkedElementSymbol]) {
+                reject(new Error("No datasource"));
+                return;
+            }
+
+            const internalUpdateCloneData = this.getInternalUpdateCloneData();
+            if (!internalUpdateCloneData) {
+                reject(new Error("No update data"));
+                return;
+            }
+
+            const internalData = internalUpdateCloneData?.["data"];
+            if (
+                internalData === undefined ||
+                internalData === null ||
+                internalData === ""
+            ) {
+                reject(new Error("No data"));
+                return;
+            }
+
+            setTimeout(() => {
+                const path = this.getOption("mapping.data");
+                const index = this.getOption("mapping.index");
+
+                let pathWithIndex;
+
+                if (isString(path) && path !== "") {
+                    pathWithIndex = path + "." + index;
+                } else {
+                    pathWithIndex = index;
+                }
+
+                const data = this[datasourceLinkedElementSymbol].data;
+                const unref = JSON.stringify(data);
+                const ref = JSON.parse(unref);
+
+                new Pathfinder(ref).setVia(pathWithIndex, internalData);
+
+                this[datasourceLinkedElementSymbol].data = ref;
+
+                resolve();
+            }, 0);
+        });
+    }
+
+    /**
+     * This method is responsible for assembling the component.
+     *
+     * It calls the parent's assemble method first, then initializes control references and event handlers.
+     * If the `datasource.selector` option is provided and is a string, it searches for the corresponding
+     * element in the DOM using that selector.
+     *
+     * If the selector matches exactly one element, it checks if the element is an instance of the `Datasource` class.
+     *
+     * If it is, the component's `datasourceLinkedElementSymbol` property is set to the element, and the component
+     * attaches an observer to the datasource's changes.
+     *
+     * The observer is a function that calls the `handleDataSourceChanges` method in the context of the component.
+     * Additionally, the component attaches an observer to itself, which also calls the `handleDataSourceChanges`
+     * method in the component's context.
+     */
+    [assembleMethodSymbol]() {
+        super[assembleMethodSymbol]();
+
+        // initControlReferences.call(self);
+        initEventHandler.call(this);
+
+        const selector = this.getOption("datasource.selector");
+
+        if (isString(selector)) {
+            const element = findElementWithSelectorUpwards(this, selector);
+            if (element === null) {
+                throw new Error("the selector must match exactly one element");
+            }
+
+            if (!(element instanceof Datasource)) {
+                throw new TypeError("the element must be a datasource");
+            }
+
+            this[datasourceLinkedElementSymbol] = element;
+            element.datasource.attachObserver(
+                new Observer(handleDataSourceChanges.bind(this)),
+            );
+        }
+
+        this.attachObserver(
+            new Observer(() => {
+                handleDataSourceChanges.call(this);
+            }),
+        );
+    }
+
+    /**
+     * @return [CSSStyleSheet]
+     */
+    static getCSSStyleSheet() {
+        return [FormStyleSheet, DatasetStyleSheet];
+    }
 }
 
 /**
  * @private
  */
 function initEventHandler() {
-	this[attributeObserverSymbol][ATTRIBUTE_DATATABLE_INDEX] = () => {
-		const index = this.getAttribute(ATTRIBUTE_DATATABLE_INDEX);
-		if (index) {
-			this.setOption("mapping.index", parseInt(index, 10));
-		}
-	};
+    this[attributeObserverSymbol][ATTRIBUTE_DATATABLE_INDEX] = () => {
+        const index = this.getAttribute(ATTRIBUTE_DATATABLE_INDEX);
+        if (index) {
+            this.setOption("mapping.index", parseInt(index, 10));
+        }
+    };
 }
 
 /**
@@ -264,17 +264,17 @@ function initEventHandler() {
  * @param {Object} options
  */
 function updateOptionsFromArguments(options) {
-	const index = this.getAttribute(ATTRIBUTE_DATATABLE_INDEX);
+    const index = this.getAttribute(ATTRIBUTE_DATATABLE_INDEX);
 
-	if (index !== null && index !== undefined) {
-		options.mapping.index = parseInt(index, 10);
-	}
+    if (index !== null && index !== undefined) {
+        options.mapping.index = parseInt(index, 10);
+    }
 
-	const selector = this.getAttribute(ATTRIBUTE_DATASOURCE_SELECTOR);
+    const selector = this.getAttribute(ATTRIBUTE_DATASOURCE_SELECTOR);
 
-	if (selector) {
-		options.datasource.selector = selector;
-	}
+    if (selector) {
+        options.datasource.selector = selector;
+    }
 }
 
 /**
@@ -282,8 +282,8 @@ function updateOptionsFromArguments(options) {
  * @return {string}
  */
 function getTemplate() {
-	// language=HTML
-	return `
+    // language=HTML
+    return `
         <div data-monster-role="control" part="control">
             <slot></slot>
         </div>

package/source/components/datatable/datatable.mjs

@@ -511,8 +511,7 @@ function getFilterConfigKey() {
  * @returns {Promise}
  */
 function getHostConfig(callback) {
-	const document = getDocument();
-	const host = document.querySelector("monster-host");
+	const host = findElementWithSelectorUpwards( this,"monster-host");
 
 	if (!(host && this.id)) {
 		return Promise.resolve({});
@@ -608,8 +607,7 @@ function updateConfigColumnBar() {
 		map[option.name] = option.visible;
 	}
 
-	const document = getDocument();
-	const host = document.querySelector("monster-host");
+	const host = findElementWithSelectorUpwards( this,"monster-host");
 	if (!(host && this.id)) {
 		return;
 	}
@@ -816,8 +814,7 @@ function storeOrderStatement(doFetch) {
 	const statement = createOrderStatement(headers);
 	setDataSource.call(this, { orderBy: statement }, doFetch);
 
-	const document = getDocument();
-	const host = document.querySelector("monster-host");
+	const host = findElementWithSelectorUpwards( this,"monster-host");
 	if (!(host && this.id)) {
 		return;
 	}

package/source/components/datatable/filter.mjs

@@ -726,8 +726,7 @@ function initTabEvents() {
 				}
 			}
 
-			const document = getDocument();
-			const host = document.querySelector("monster-host");
+			const host = findElementWithSelectorUpwards( this,"monster-host");
 			if (!(host && this.id)) {
 				return;
 			}
@@ -768,8 +767,7 @@ function updateFilterTabs() {
 		return;
 	}
 
-	const document = getDocument();
-	const host = document.querySelector("monster-host");
+	const host = findElementWithSelectorUpwards( this,"monster-host");
 	if (!(host && this.id)) {
 		return;
 	}
@@ -1067,8 +1065,7 @@ function getControlValuesFromLabel(label) {
  * @returns {Promise<unknown>}
  */
 function initFromConfig() {
-	const document = getDocument();
-	const host = document.querySelector("monster-host");
+	const host = findElementWithSelectorUpwards( this,"monster-host");
 
 	if (!(isInstance(host, Host) && this.id)) {
 		return Promise.resolve();
@@ -1111,8 +1108,7 @@ function initFromConfig() {
  * @private
  */
 function updateConfig() {
-	const document = getDocument();
-	const host = document.querySelector("monster-host");
+	const host = findElementWithSelectorUpwards( this,"monster-host");
 	if (!(host && this.id)) {
 		return;
 	}

package/source/components/datatable/pagination.mjs

@@ -17,6 +17,7 @@ import {
 	CustomElement,
 	registerCustomElement,
 } from "../../dom/customelement.mjs";
+import {findElementWithSelectorUpwards} from "../../dom/util.mjs";
 import { ThemeStyleSheet } from "../stylesheet/theme.mjs";
 import { ATTRIBUTE_DATASOURCE_SELECTOR } from "./constants.mjs";
 import { Datasource } from "./datasource.mjs";
@@ -188,12 +189,11 @@ class Pagination extends CustomElement {
 		const selector = this.getOption("datasource.selector", "");
 
 		if (isString(selector)) {
-			const elements = document.querySelectorAll(selector);
-			if (elements.length !== 1) {
+			const element = findElementWithSelectorUpwards( this,selector);
+			if (element===null) {
 				throw new Error("the selector must match exactly one element");
 			}
-
-			const element = elements[0];
+			
 			if (!(element instanceof Datasource)) {
 				throw new TypeError("the element must be a datasource");
 			}

package/source/components/datatable/save-button.mjs

@@ -22,6 +22,7 @@ import {
 	attributeObserverSymbol,
 	registerCustomElement,
 } from "../../dom/customelement.mjs";
+import {findElementWithSelectorUpwards} from "../../dom/util.mjs";
 import { isString, isArray } from "../../types/is.mjs";
 import { Observer } from "../../types/observer.mjs";
 import { TokenList } from "../../types/tokenlist.mjs";
@@ -154,12 +155,12 @@ class SaveButton extends CustomElement {
 		const selector = this.getOption("datasource.selector");
 
 		if (isString(selector)) {
-			const elements = document.querySelectorAll(selector);
-			if (elements.length !== 1) {
+
+			const element = findElementWithSelectorUpwards( this,selector);
+			if (element===null) {
 				throw new Error("the selector must match exactly one element");
 			}
-
-			const element = elements[0];
+			
 			if (!(element instanceof Datasource)) {
 				throw new TypeError("the element must be a datasource");
 			}

package/source/components/datatable/status.mjs

@@ -17,6 +17,7 @@ import {
 	CustomElement,
 	registerCustomElement,
 } from "../../dom/customelement.mjs";
+import {findElementWithSelectorUpwards} from "../../dom/util.mjs";
 import { ThemeStyleSheet } from "../stylesheet/theme.mjs";
 import { Datasource } from "./datasource.mjs";
 import { SpinnerStyleSheet } from "../stylesheet/spinner.mjs";
@@ -174,12 +175,12 @@ function initEventHandler() {
 	const self = this;
 
 	if (isString(selector)) {
-		const elements = document.querySelectorAll(selector);
-		if (elements.length !== 1) {
+
+		const element = findElementWithSelectorUpwards( this,selector);
+		if (element===null) {
 			throw new Error("the selector must match exactly one element");
 		}
-
-		const element = elements[0];
+		
 		if (!(element instanceof Datasource)) {
 			throw new TypeError("the element must be a datasource");
 		}

package/source/data/datasource/dom.mjs

@@ -12,11 +12,12 @@
  * SPDX-License-Identifier: AGPL-3.0
  */
 
-import { instanceSymbol } from "../../constants.mjs";
-import { isObject } from "../../types/is.mjs";
-import { Datasource } from "../datasource.mjs";
+import {instanceSymbol} from "../../constants.mjs";
+import {findElementWithSelectorUpwards} from "../../dom/util.mjs";
+import {isObject} from "../../types/is.mjs";
+import {Datasource} from "../datasource.mjs";
 
-export { DomStorage };
+export {DomStorage};
 
 /**
  * The DomStorage is a class that stores data in memory.
@@ -26,93 +27,93 @@ export { DomStorage };
  * @memberOf Monster.Data.Datasource
  */
 class DomStorage extends Datasource {
-	/**
-	 * @param {Object} [options] options contains definitions for the datasource.
-	 */
-	constructor(options) {
-		super();
+    /**
+     * @param {Object} [options] options contains definitions for the datasource.
+     */
+    constructor(options) {
+        super();
 
-		if (isObject(options)) {
-			this.setOptions(options);
-		}
-	}
+        if (isObject(options)) {
+            this.setOptions(options);
+        }
+    }
 
-	/**
-	 * This method is called by the `instanceof` operator.
-	 * @returns {symbol}
-	 */
-	static get [instanceSymbol]() {
-		return Symbol.for("@schukai/monster/data/datasource/storage/dom-storage");
-	}
+    /**
+     * This method is called by the `instanceof` operator.
+     * @returns {symbol}
+     */
+    static get [instanceSymbol]() {
+        return Symbol.for("@schukai/monster/data/datasource/storage/dom-storage");
+    }
 
-	/**
-	 * @property {Object} defaults
-	 * @property {Object} defaults.read
-	 * @property {string} defaults.read.selector
-	 * @property {Object} defaults.write
-	 * @property {string} defaults.write.selector
-	 */
-	get defaults() {
-		return Object.assign({}, super.defaults, {
-			read: {
-				selector: undefined,
-			},
-			write: {
-				selector: undefined,
-			},
-		});
-	}
+    /**
+     * @property {Object} defaults
+     * @property {Object} defaults.read
+     * @property {string} defaults.read.selector
+     * @property {Object} defaults.write
+     * @property {string} defaults.write.selector
+     */
+    get defaults() {
+        return Object.assign({}, super.defaults, {
+            read: {
+                selector: undefined,
+            },
+            write: {
+                selector: undefined,
+            },
+        });
+    }
 
-	/**
-	 * @return {Promise}
-	 * @throws {Error} The read selector is not defined
-	 * @throws {Error} There are no storage element
-	 */
-	read() {
-		const selector = this.getOption("read.selector", undefined);
-		if (!selector) {
-			throw new Error("The read selector is not defined");
-		}
+    /**
+     * @return {Promise}
+     * @throws {Error} The read selector is not defined
+     * @throws {Error} There are no storage element
+     */
+    read() {
+        const selector = this.getOption("read.selector", undefined);
+        if (!selector) {
+            throw new Error("The read selector is not defined");
+        }
 
-		const storage = document.querySelector(selector);
-		if (!storage) {
-			throw new Error("There are no storage element");
-		}
+        const storage = findElementWithSelectorUpwards(this, selector);
+        if (!storage) {
+            throw new Error("There is no storage element");
+        }
 
-		return new Promise((resolve, reject) => {
-			try {
-				const data = JSON.parse(storage.innerHTML);
-				this.set(data);
-				resolve(data);
-			} catch (e) {
-				reject(e);
-			}
-		});
-	}
+        return new Promise((resolve, reject) => {
+            try {
+                const data = JSON.parse(storage.innerHTML);
+                this.set(data);
+                resolve(data);
+            } catch (e) {
+                reject(e);
+            }
+        });
+    }
 
-	/**
-	 * @return {Promise}
-	 * @throws {Error} The write selector is not defined
-	 * @throws {Error} There are no storage element
-	 */
-	write() {
-		const selector = this.getOption("write.selector");
-		if (!selector) {
-			throw new Error("The write selector is not defined");
-		}
+    /**
+     * @return {Promise}
+     * @throws {Error} The write selector is not defined
+     * @throws {Error} There are no storage element
+     */
+    write() {
+        const selector = this.getOption("write.selector");
+        if (!selector) {
+            throw new Error("The option write.selector is not defined");
+        }
 
-		const storage = document.querySelector(selector);
-		if (!storage) {
-			throw new Error("There are no storage element");
-		}
+        const storage = findElementWithSelectorUpwards(this, selector);
+        if (!storage) {
+            throw new Error("There is no storage element");
+        }
 
-		return new Promise((resolve, reject) => {
-			try {
-				storage.innerHTML = JSON.stringify(this.get());
-				resolve(storage);
-			} catch (e) {
-				reject(e);
-			}
-		});
-	}
+        return new Promise((resolve, reject) => {
+            try {
+                storage.innerHTML = JSON.stringify(this.get());
+                resolve(storage);
+            } catch (e) {
+                reject(e);
+            }
+        });
+    }
 }

package/source/dom/resource/data.mjs

@@ -12,26 +12,28 @@
  * SPDX-License-Identifier: AGPL-3.0
  */
 
-import { internalStateSymbol } from "../../constants.mjs";
-import { extend } from "../../data/extend.mjs";
-import { getGlobalFunction } from "../../types/global.mjs";
+import {internalStateSymbol} from "../../constants.mjs";
+import {extend} from "../../data/extend.mjs";
+import {getGlobalFunction} from "../../types/global.mjs";
+import {addAttributeToken} from "../attributes.mjs";
 import {
-	ATTRIBUTE_CLASS,
-	ATTRIBUTE_ERRORMESSAGE,
-	ATTRIBUTE_ID,
-	ATTRIBUTE_SRC,
-	ATTRIBUTE_TITLE,
-	ATTRIBUTE_TYPE,
-	TAG_SCRIPT,
+    ATTRIBUTE_CLASS,
+    ATTRIBUTE_ERRORMESSAGE,
+    ATTRIBUTE_ID,
+    ATTRIBUTE_SRC,
+    ATTRIBUTE_TITLE,
+    ATTRIBUTE_TYPE,
+    TAG_SCRIPT,
 } from "../constants.mjs";
 import {
-	KEY_DOCUMENT,
-	KEY_QUERY,
-	referenceSymbol,
-	Resource,
+    KEY_DOCUMENT,
+    KEY_QUERY,
+    referenceSymbol,
+    Resource,
 } from "../resource.mjs";
-import { instanceSymbol } from "../../constants.mjs";
-export { Data };
+import {instanceSymbol} from "../../constants.mjs";
+
+export {Data};
 
 /**
  * This class is used by the resource manager to embed data.
@@ -43,58 +45,59 @@ export { Data };
  * @summary A Data Resource class
  */
 class Data extends Resource {
-	/**
-	 * @property {string} mode=cors https://developer.mozilla.org/en-US/docs/Web/API/fetch
-	 * @property {string} credentials=same-origin https://developer.mozilla.org/en-US/docs/Web/API/fetch
-	 * @property {string} type=application/json {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-type}
-	 */
-	get defaults() {
-		return extend({}, super.defaults, {
-			mode: "cors",
-			credentials: "same-origin",
-			type: "application/json",
-		});
-	}
-
-	/**
-	 *
-	 * @return {Monster.DOM.Resource.Data}
-	 */
-	create() {
-		createElement.call(this);
-		return this;
-	}
-
-	/**
-	 * This method appends the HTMLElement to the specified document
-	 *
-	 * throws {Error} target not found
-	 * @return {Monster.DOM.Resource}
-	 */
-	connect() {
-		if (!(this[referenceSymbol] instanceof HTMLElement)) {
-			this.create();
-		}
-
-		appendToDocument.call(this);
-		return this;
-	}
-
-	/**
-	 * This method is called by the `instanceof` operator.
-	 * @returns {symbol}
-	 * @since 2.1.0
-	 */
-	static get [instanceSymbol]() {
-		return Symbol.for("@schukai/monster/dom/resource/data");
-	}
-
-	/**
-	 * @return {string}
-	 */
-	static getURLAttribute() {
-		return ATTRIBUTE_SRC;
-	}
+    /**
+     * @property {string} mode=cors https://developer.mozilla.org/en-US/docs/Web/API/fetch
+     * @property {string} credentials=same-origin https://developer.mozilla.org/en-US/docs/Web/API/fetch
+     * @property {string} type=application/json {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-type}
+     */
+    get defaults() {
+        return extend({}, super.defaults, {
+            mode: "cors",
+            credentials: "same-origin",
+            type: "application/json",
+        });
+    }
+
+    /**
+     *
+     * @return {Monster.DOM.Resource.Data}
+     */
+    create() {
+        createElement.call(this);
+        return this;
+    }
+
+    /**
+     * This method appends the HTMLElement to the specified document
+     *
+     * throws {Error} target not found
+     * @return {Monster.DOM.Resource}
+     */
+    connect() {
+        const self = this;
+        if (!(this[referenceSymbol] instanceof HTMLElement)) {
+            this.create();
+        }
+
+        appendToDocument.call(this);
+        return this;
+    }
+
+    /**
+     * This method is called by the `instanceof` operator.
+     * @returns {symbol}
+     * @since 2.1.0
+     */
+    static get [instanceSymbol]() {
+        return Symbol.for("@schukai/monster/dom/resource/data");
+    }
+
+    /**
+     * @return {string}
+     */
+    static getURLAttribute() {
+        return ATTRIBUTE_SRC;
+    }
 }
 
 /**
@@ -102,21 +105,21 @@ class Data extends Resource {
  * @return {Monster.DOM.Resource.Data}
  */
 function createElement() {
-	const document = this.getOption(KEY_DOCUMENT);
-	this[referenceSymbol] = document.createElement(TAG_SCRIPT);
-
-	for (const key of [
-		ATTRIBUTE_TYPE,
-		ATTRIBUTE_ID,
-		ATTRIBUTE_CLASS,
-		ATTRIBUTE_TITLE,
-	]) {
-		if (this.getOption(key) !== undefined) {
-			this[referenceSymbol][key] = this.getOption(key);
-		}
-	}
-
-	return this;
+    const document = this.getOption(KEY_DOCUMENT);
+    this[referenceSymbol] = document.createElement(TAG_SCRIPT);
+
+    for (const key of [
+        ATTRIBUTE_TYPE,
+        ATTRIBUTE_ID,
+        ATTRIBUTE_CLASS,
+        ATTRIBUTE_TITLE,
+    ]) {
+        if (this.getOption(key) !== undefined) {
+            this[referenceSymbol][key] = this.getOption(key);
+        }
+    }
+
+    return this;
 }
 
 /**
@@ -125,41 +128,41 @@ function createElement() {
  * throws {Error} target not found
  */
 function appendToDocument() {
-	const targetNode = document.querySelector(this.getOption(KEY_QUERY, "head"));
-	if (!(targetNode instanceof HTMLElement)) {
-		throw new Error("target not found");
-	}
-
-	targetNode.appendChild(this[referenceSymbol]);
-
-	getGlobalFunction("fetch")(this.getOption(ATTRIBUTE_SRC), {
-		method: "GET", // *GET, POST, PUT, DELETE, etc.
-		mode: this.getOption("mode", "cors"), // no-cors, *cors, same-origin
-		cache: "no-cache", // *default, no-cache, reload, force-cache, only-if-cached
-		credentials: this.getOption("credentials", "same-origin"), // include, *same-origin, omit
-		headers: {
-			Accept: this.getOption("type", "application/json"),
-		},
-		redirect: "follow", // manual, *follow, error
-		referrerPolicy: "no-referrer", // no-referrer,
-	})
-		.then((response) => {
-			return response.text();
-		})
-		.then((text) => {
-			const textNode = document.createTextNode(text);
-			this[referenceSymbol].appendChild(textNode);
-
-			this[internalStateSymbol].getSubject()["loaded"] = true;
-		})
-		.catch((e) => {
-			this[internalStateSymbol].setSubject({
-				loaded: true,
-				error: e.toString(),
-			});
-
-			targetNode.setAttribute(ATTRIBUTE_ERRORMESSAGE, e.toString());
-		});
-
-	return this;
+    const targetNode = document.querySelector(this.getOption(KEY_QUERY, "head"));
+    if (!(targetNode instanceof HTMLElement)) {
+        throw new Error("target not found");
+    }
+
+    targetNode.appendChild(this[referenceSymbol]);
+
+    getGlobalFunction("fetch")(this.getOption(ATTRIBUTE_SRC), {
+        method: "GET", // *GET, POST, PUT, DELETE, etc.
+        mode: this.getOption("mode", "cors"), // no-cors, *cors, same-origin
+        cache: "no-cache", // *default, no-cache, reload, force-cache, only-if-cached
+        credentials: this.getOption("credentials", "same-origin"), // include, *same-origin, omit
+        headers: {
+            Accept: this.getOption("type", "application/json"),
+        },
+        redirect: "follow", // manual, *follow, error
+        referrerPolicy: "no-referrer", // no-referrer,
+    })
+        .then((response) => {
+            return response.text();
+        })
+        .then((text) => {
+            const textNode = document.createTextNode(text);
+            this[referenceSymbol].appendChild(textNode);
+
+            this[internalStateSymbol].getSubject()["loaded"] = true;
+        })
+        .catch((e) => {
+            this[internalStateSymbol].setSubject({
+                loaded: true,
+                error: e.toString(),
+            });
+
+            targetNode.setAttribute(ATTRIBUTE_ERRORMESSAGE, e.toString());
+        });
+
+    return this;
 }

package/source/dom/resource.mjs

@@ -242,7 +242,6 @@ function addEvents() {
 		this[referenceSymbol].removeEventListener("error", onError);
 		this[referenceSymbol].removeEventListener("load", onLoad);
 		this[internalStateSymbol].getSubject()["loaded"] = true;
-		return;
 	};
 
 	this[referenceSymbol].addEventListener("load", onLoad, false);