@schukai/monster 4.42.2 → 4.43.0

package/source/dom/customelement.mjs

@@ -21,29 +21,29 @@ import { Formatter } from "../text/formatter.mjs";
 import { parseDataURL } from "../types/dataurl.mjs";
 import { getGlobalObject } from "../types/global.mjs";
 import {
-	isArray,
-	isFunction,
-	isIterable,
-	isObject,
-	isString,
+  isArray,
+  isFunction,
+  isIterable,
+  isObject,
+  isString,
 } from "../types/is.mjs";
 import { Observer } from "../types/observer.mjs";
 import { ProxyObserver } from "../types/proxyobserver.mjs";
 import {
-	validateFunction,
-	validateInstance,
-	validateObject,
+  validateFunction,
+  validateInstance,
+  validateObject,
 } from "../types/validate.mjs";
 import { clone } from "../util/clone.mjs";
 import { getLinkedObjects, hasObjectLink } from "./attributes.mjs";
 import {
-	ATTRIBUTE_DISABLED,
-	ATTRIBUTE_OPTIONS,
-	ATTRIBUTE_INIT_CALLBACK,
-	ATTRIBUTE_OPTIONS_SELECTOR,
-	ATTRIBUTE_SCRIPT_HOST,
-	customElementUpdaterLinkSymbol,
-	initControlCallbackName,
+  ATTRIBUTE_DISABLED,
+  ATTRIBUTE_OPTIONS,
+  ATTRIBUTE_INIT_CALLBACK,
+  ATTRIBUTE_OPTIONS_SELECTOR,
+  ATTRIBUTE_SCRIPT_HOST,
+  customElementUpdaterLinkSymbol,
+  initControlCallbackName,
 } from "./constants.mjs";
 import { findDocumentTemplate, Template } from "./template.mjs";
 import { addObjectWithUpdaterToElement } from "./updater.mjs";
@@ -55,13 +55,13 @@ import { setOptionFromAttribute } from "./util/set-option-from-attribute.mjs";
 import { addErrorAttribute } from "./error.mjs";
 
 export {
-	CustomElement,
-	initMethodSymbol,
-	assembleMethodSymbol,
-	attributeObserverSymbol,
-	registerCustomElement,
-	getSlottedElements,
-	updaterTransformerMethodsSymbol,
+  CustomElement,
+  initMethodSymbol,
+  assembleMethodSymbol,
+  attributeObserverSymbol,
+  registerCustomElement,
+  getSlottedElements,
+  updaterTransformerMethodsSymbol,
 };
 
 /**
@@ -73,14 +73,14 @@ const initMethodSymbol = Symbol.for("@schukai/monster/dom/@@initMethodSymbol");
  * @type {symbol}
  */
 const assembleMethodSymbol = Symbol.for(
-	"@schukai/monster/dom/@@assembleMethodSymbol",
+  "@schukai/monster/dom/@@assembleMethodSymbol",
 );
 
 /**
  * @type {symbol}
  */
 const updaterTransformerMethodsSymbol = Symbol.for(
-	"@schukai/monster/dom/@@updaterTransformerMethodsSymbol",
+  "@schukai/monster/dom/@@updaterTransformerMethodsSymbol",
 );
 
 /**
@@ -88,7 +88,7 @@ const updaterTransformerMethodsSymbol = Symbol.for(
  * @type {symbol}
  */
 const attributeObserverSymbol = Symbol.for(
-	"@schukai/monster/dom/@@attributeObserver",
+  "@schukai/monster/dom/@@attributeObserver",
 );
 
 /**
@@ -96,7 +96,7 @@ const attributeObserverSymbol = Symbol.for(
  * @type {symbol}
  */
 const attributeMutationObserverSymbol = Symbol(
-	"@schukai/monster/dom/@@mutationObserver",
+  "@schukai/monster/dom/@@mutationObserver",
 );
 
 /**
@@ -185,583 +185,577 @@ const scriptHostElementSymbol = Symbol("scriptHostElement");
  * @summary A base class for HTML5 custom controls.
  */
 class CustomElement extends HTMLElement {
-	/**
-	 * A new object is created. First, the `initOptions` method is called. Here the
-	 * options can be defined in derived classes. Subsequently, the shadowRoot is initialized.
-	 *
-	 * IMPORTANT: CustomControls instances are not created via the constructor, but either via a tag in the HTML or via <code>document.createElement()</code>.
-	 *
-	 * @throws {Error} the option attribute does not contain a valid JSON definition.
-	 */
-	constructor() {
-		super();
-
-		this[attributeObserverSymbol] = {};
-
-		const options = initOptionsFromAttributes(this, extend({}, this.defaults));
-		if (!isObject(options)) {
-			throw new Error(
-				`The options are not defined correctly in the ${this.getTag()} element.`,
-			);
-		}
-
-		if (this.customization instanceof Map) {
-			const pathfinder = new Pathfinder(options);
-			this.customization.forEach((value, key) => {
-				pathfinder.setVia(key, value);
-			});
-		}
-
-		this[internalSymbol] = new ProxyObserver({ options });
-		this[initMethodSymbol]();
-		initOptionObserver.call(this);
-		this[scriptHostElementSymbol] = [];
-	}
-
-	/**
-	 * This method is called by the `instanceof` operator.
-	 *
-	 * @return {symbol}
-	 * @since 2.1.0
-	 */
-	static get [instanceSymbol]() {
-		return Symbol.for("@schukai/monster/dom/custom-element@@instance");
-	}
-
-	/**
-	 * This method determines which attributes are to be
-	 * monitored by `attributeChangedCallback()`. Unfortunately, this method is static.
-	 * Therefore, the `observedAttributes` property cannot be changed during runtime.
-	 *
-	 * @return {string[]}
-	 * @since 1.15.0
-	 */
-	static get observedAttributes() {
-		return [];
-	}
-
-	/**
-	 *
-	 * @param attribute
-	 * @param callback
-	 * @return {CustomElement}
-	 */
-	addAttributeObserver(attribute, callback) {
-		validateFunction(callback);
-		this[attributeObserverSymbol][attribute] = callback;
-		return this;
-	}
-
-	/**
-	 *
-	 * @param attribute
-	 * @return {CustomElement}
-	 */
-	removeAttributeObserver(attribute) {
-		delete this[attributeObserverSymbol][attribute];
-		return this;
-	}
-
-	/**
-	 * The `customization` property allows overwriting the defaults.
-	 * Unlike the defaults that expect an object, the customization is a Map.
-	 * This also allows overwriting individual values in a deeper structure
-	 * without having to redefine the entire structure and thus changing the defaults.
-	 * @returns {Map}
-	 */
-	get customization() {
-		return new Map();
-	}
-
-	/**
-	 * The `defaults` property defines the default values for a control. If you want to override these,
-	 * you can use various methods, which are described in the documentation available at
-	 * {@link https://monsterjs.orgendocconfigurate-a-monster-control}.
-	 *
-	 * The individual configuration values are listed below:
-	 *
-	 * More information about the shadowRoot can be found in the [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/API/Element/attachShadow),
-	 * in the [HTML Standard](https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements) or in the [WHATWG Wiki](https://wiki.whatwg.org/wiki/Custom_Elements).
-	 *
-	 * More information about the template element can be found in the [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template).
-	 *
-	 * More information about the slot element can be found in the [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot).
-	 *
-	 * @property {boolean} disabled=false Specifies whether the control is disabled. When present, it makes the element non-mutable, non-focusable, and non-submittable with the form.
-	 * @property {string} shadowMode=open Specifies the mode of the shadow root. When set to `open`, elements in the shadow root are accessible from JavaScript outside the root, while setting it to `closed` denies access to the root's nodes from JavaScript outside it.
-	 * @property {Boolean} delegatesFocus=true Specifies the behavior of the control with respect to focusability. When set to `true`, it mitigates custom element issues around focusability. When a non-focusable part of the shadow DOM is clicked, the first focusable part is given focus, and the shadow host is given any available :focus styling.
-	 * @property {Object} templates Specifies the templates used by the control.
-	 * @property {string} templates.main=undefined Specifies the main template used by the control.
-	 * @property {Object} templateMapping Specifies the mapping of templates.
-	 * @property {Object} templateFormatter Specifies the formatter for the templates.
-	 * @property {Object} templateFormatter.marker Specifies the marker for the templates.
-	 * @property {Function} templateFormatter.marker.open=null Specifies the opening marker for the templates.
-	 * @property {Function} templateFormatter.marker.close=null Specifies the closing marker for the templates.
-	 * @property {Boolean} templateFormatter.i18n=false Specifies whether the templates should be formatted with i18n.
-	 * @property {Boolean} eventProcessing=false Specifies whether the control processes events.
-	 * @since 1.8.0
-	 */
-	get defaults() {
-		return {
-			disabled: false,
-			shadowMode: "open",
-			delegatesFocus: true,
-			templates: {
-				main: undefined,
-			},
-			templateMapping: {},
-			templateFormatter: {
-				marker: {
-					open: null,
-					close: null,
-				},
-				i18n: false,
-			},
-
-			eventProcessing: false,
-		};
-	}
-
-	/**
-	 * This method updates the labels of the element.
-	 * The labels are defined in the option object.
-	 * The key of the label is used to retrieve the translation from the document.
-	 * If the translation is different from the label, the label is updated.
-	 *
-	 * Before you can use this method, you must have loaded the translations.
-	 *
-	 * @return {CustomElement}
-	 * @throws {Error}  Cannot find an element with translations. Add a translation object to the document.
-	 */
-	updateI18n() {
-		let translations;
-
-		try {
-			translations = getDocumentTranslations();
-		} catch (e) {
-			addErrorAttribute(this, e);
-			return this;
-		}
-
-		if (!translations) {
-			return this;
-		}
-
-		const labels = this.getOption("labels");
-		if (!(isObject(labels) || isIterable(labels))) {
-			return this;
-		}
-
-		for (const key in labels) {
-			const def = labels[key];
-
-			if (isString(def)) {
-				const text = translations.getText(key, def);
-				if (text !== def) {
-					this.setOption(`labels.${key}`, text);
-				}
-				continue;
-			} else if (isObject(def)) {
-				for (const k in def) {
-					const d = def[k];
-
-					const text = translations.getPluralRuleText(key, k, d);
-					if (!isString(text)) {
-						throw new Error("Invalid labels definition");
-					}
-					if (text !== d) {
-						this.setOption(`labels.${key}.${k}`, text);
-					}
-				}
-				continue;
-			}
-
-			throw new Error("Invalid labels definition");
-		}
-		return this;
-	}
-
-	/**
-	 * The `getTag()` method returns the tag name associated with the custom element. This method should be overwritten
-	 * by the derived class.
-	 *
-	 * Note that there is no check on the name of the tag in this class. It is the responsibility of
-	 * the developer to assign an appropriate tag name. If the name is not valid, the
-	 * `registerCustomElement()` method will issue an error.
-	 *
-	 * @see https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name
-	 * @throws {Error} This method must be overridden by the derived class.
-	 * @return {string} The tag name associated with the custom element.
-	 * @since 1.7.0
-	 */
-	static getTag() {
-		throw new Error(
-			"The method `getTag()` must be overridden by the derived class.",
-		);
-	}
-
-	/**
-	 * The `getCSSStyleSheet()` method returns a `CSSStyleSheet` object that defines the styles for the custom element.
-	 * If the environment does not support the `CSSStyleSheet` constructor, then an object can be built using the provided detour.
-	 *
-	 * If `undefined` is returned, then the shadow root does not receive a stylesheet.
-	 *
-	 * Example usage:
-	 *
-	 * ```js
-	 * class MyElement extends CustomElement {
-	 *   static getCSSStyleSheet() {
-	 *       const sheet = new CSSStyleSheet();
-	 *       sheet.replaceSync("p { color: red; }");
-	 *       return sheet;
-	 *   }
-	 * }
-	 * ```
-	 *
-	 * If the environment does not support the `CSSStyleSheet` constructor,
-	 * you can use the following workaround to create the stylesheet:
-	 *
-	 * ```js
-	 * const doc = document.implementation.createHTMLDocument('title');
-	 * let style = doc.createElement("style");
-	 * style.innerHTML = "p { color: red; }";
-	 * style.appendChild(document.createTextNode(""));
-	 * doc.head.appendChild(style);
-	 * return doc.styleSheets[0];
-	 * ```
-	 *
-	 * @return {CSSStyleSheet|CSSStyleSheet[]|string|undefined} A `CSSStyleSheet` object or an array of such objects that define the styles for the custom element, or `undefined` if no stylesheet should be applied.
-	 */
-	static getCSSStyleSheet() {
-		return undefined;
-	}
-
-	/**
-	 * attach a new observer
-	 *
-	 * @param {Observer} observer
-	 * @return {CustomElement}
-	 */
-	attachObserver(observer) {
-		this[internalSymbol].attachObserver(observer);
-		return this;
-	}
-
-	/**
-	 * detach a observer
-	 *
-	 * @param {Observer} observer
-	 * @return {CustomElement}
-	 */
-	detachObserver(observer) {
-		this[internalSymbol].detachObserver(observer);
-		return this;
-	}
-
-	/**
-	 * @param {Observer} observer
-	 * @return {ProxyObserver}
-	 */
-	containsObserver(observer) {
-		return this[internalSymbol].containsObserver(observer);
-	}
-
-	/**
-	 * nested options can be specified by path `a.b.c`
-	 *
-	 * @param {string} path
-	 * @param {*} defaultValue
-	 * @return {*}
-	 * @since 1.10.0
-	 */
-	getOption(path, defaultValue = undefined) {
-		let value;
-
-		try {
-			value = new Pathfinder(
-				this[internalSymbol].getRealSubject()["options"],
-			).getVia(path);
-		} catch (e) {}
-
-		if (value === undefined) return defaultValue;
-		return value;
-	}
-
-	/**
-	 * Set option and inform elements
-	 *
-	 * @param {string} path
-	 * @param {*} value
-	 * @return {CustomElement}
-	 * @since 1.14.0
-	 */
-	setOption(path, value) {
-		new Pathfinder(this[internalSymbol].getSubject()["options"]).setVia(
-			path,
-			value,
-		);
-		return this;
-	}
-
-	/**
-	 * @since 1.15.0
-	 * @param {string|object} options
-	 * @return {CustomElement}
-	 */
-	setOptions(options) {
-		if (isString(options)) {
-			options = parseOptionsJSON.call(this, options);
-		}
-		// 2024-01-21: remove this.defaults, otherwise it will overwrite
-		// the current settings that have already been made.
-		// https://gitlab.schukai.com/oss/libraries/javascript/monster/-/issues/136
-		extend(this[internalSymbol].getSubject()["options"], options);
-
-		return this;
-	}
-
-	/**
-	 * Is called once via the constructor
-	 *
-	 * @return {CustomElement}
-	 * @since 1.8.0
-	 */
-	[initMethodSymbol]() {
-		return this;
-	}
-
-	/**
-	 * This method is called once when the object is equipped with update for the dynamic change of the dom.
-	 * The functions returned here can be used as pipe functions in the template.
-	 *
-	 * In the example, the function `my-transformer` is defined. In the template, you can use it as follows:
-	 *
-	 * ```html
-	 * <my-element
-	 *   data-monster-option-transformer="path:my-value | call:my-transformer">
-	 * </my-element>
-	 * ```
-	 *
-	 * The function `my-transformer` is called with the value of `my-value` as a parameter.
-	 *
-	 * ```js
-	 * class MyElement extends CustomElement {
-	 * [updaterTransformerMethodsSymbol]() {
-	 *    return {
-	 *       "my-transformer": (value) => {
-	 *           switch (typeof Wert) {
-	 *           case "string":
-	 *               return value + "!";
-	 *           case "Zahl":
-	 *               return value + 1;
-	 *           default:
-	 *               return value;
-	 *           }
-	 *    }
-	 *    };
-	 *  };
-	 *  }
-	 * ```
-	 *
-	 * @return {object}
-	 * @since 2.43.0
-	 */
-	[updaterTransformerMethodsSymbol]() {
-		return {};
-	}
-
-	/**
-	 * This method is called once when the object is included in the DOM for the first time. It performs the following actions:
-	 *
-	 * <ol>
-	 * <li>Extracts the options from the attributes and the script tag of the element and sets them.</li>
-	 * <li>Initializes the shadow root and its CSS stylesheet (if specified).</li>
-	 * <li>Initializes the HTML content of the element.</li>
-	 * <li>Initializes the custom elements inside the shadow root and the slotted elements.</li>
-	 * <li>Attaches a mutation observer to observe changes to the attributes of the element.</li>
-	 *
-	 * @return {CustomElement} - The updated custom element.
-	 * @since 1.8.0
-	 */
-	[assembleMethodSymbol]() {
-		let elements;
-		let nodeList;
-
-		// Extract options from attributes and set them
-		const AttributeOptions = getOptionsFromAttributes.call(this);
-		if (
-			isObject(AttributeOptions) &&
-			Object.keys(AttributeOptions).length > 0
-		) {
-			this.setOptions(AttributeOptions);
-		}
-
-		// Extract options from script tag and set them
-		const ScriptOptions = getOptionsFromScriptTag.call(this);
-		if (isObject(ScriptOptions) && Object.keys(ScriptOptions).length > 0) {
-			this.setOptions(ScriptOptions);
-		}
-
-		// Initialize the shadow root and its CSS stylesheet
-		if (this.getOption("shadowMode", false) !== false) {
-			try {
-				initShadowRoot.call(this);
-				elements = this.shadowRoot.childNodes;
-			} catch (e) {
-				addErrorAttribute(this, e);
-			}
-
-			try {
-				initCSSStylesheet.call(this);
-			} catch (e) {
-				addErrorAttribute(this, e);
-			}
-		}
-
-		// If the elements are not found inside the shadow root, initialize the HTML content of the element
-		if (!(elements instanceof NodeList)) {
-			initHtmlContent.call(this);
-			elements = this.childNodes;
-		}
-
-		// Initialize the custom elements inside the shadow root and the slotted elements
-		initFromCallbackHost.call(this);
-		try {
-			nodeList = new Set([...elements, ...getSlottedElements.call(this)]);
-		} catch (e) {
-			nodeList = elements;
-		}
-
-		try {
-			this[updateCloneDataSymbol] = clone(
-				this[internalSymbol].getRealSubject()["options"],
-			);
-		} catch (e) {
-			addErrorAttribute(this, e);
-		}
-
-		const cfg = {};
-		if (this.getOption("eventProcessing") === true) {
-			cfg.eventProcessing = true;
-		}
-
-		addObjectWithUpdaterToElement.call(
-			this,
-			nodeList,
-			customElementUpdaterLinkSymbol,
-			this[updateCloneDataSymbol],
-			cfg,
-		);
-
-		// Attach a mutation observer to observe changes to the attributes of the element
-		attachAttributeChangeMutationObserver.call(this);
-
-		return this;
-	}
-
-	/**
-	 * You know what you are doing? This function is only for advanced users.
-	 * The result is a clone of the internal data.
-	 *
-	 * @return {*}
-	 */
-	getInternalUpdateCloneData() {
-		return clone(this[updateCloneDataSymbol]);
-	}
-
-	/**
-	 * This method is called every time the element is inserted into the DOM. It checks if the custom element
-	 * has already been initialized and if not, calls the assembleMethod to initialize it.
-	 *
-	 * @return {void}
-	 * @since 1.7.0
-	 * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/connectedCallback
-	 */
-	connectedCallback() {
-		// Check if the object has already been initialized
-		if (!hasObjectLink(this, customElementUpdaterLinkSymbol)) {
-			// If not, call the assembleMethod to initialize the object
-			this[assembleMethodSymbol]();
-		}
-	}
-
-	/**
-	 * Called every time the element is removed from the DOM. Useful for running clean up code.
-	 *
-	 * @return {void}
-	 * @since 1.7.0
-	 */
-	disconnectedCallback() {}
-
-	/**
-	 * The custom element has been moved into a new document (e.g. someone called document.adoptNode(el)).
-	 *
-	 * @return {void}
-	 * @since 1.7.0
-	 */
-	adoptedCallback() {}
-
-	/**
-	 * Called when an observed attribute has been added, removed, updated, or replaced. Also called for initial
-	 * values when an element is created by the parser, or upgraded. Note: only attributes listed in the observedAttributes
-	 * property will receive this callback.
-	 *
-	 * @param {string} attrName
-	 * @param {string} oldVal
-	 * @param {string} newVal
-	 * @return {void}
-	 * @since 1.15.0
-	 */
-	attributeChangedCallback(attrName, oldVal, newVal) {
-		if (attrName.startsWith("data-monster-option-")) {
-			setOptionFromAttribute(
-				this,
-				attrName,
-				this[internalSymbol].getSubject()["options"],
-			);
-		}
-
-		const callback = this[attributeObserverSymbol]?.[attrName];
-		if (isFunction(callback)) {
-			try {
-				callback.call(this, newVal, oldVal);
-			} catch (e) {
-				addErrorAttribute(this, e);
-			}
-		}
-	}
-
-	/**
-	 * Checks if the provided node is part of this component's child nodes,
-	 * including those within the shadow root, if present.
-	 *
-	 * @param {Node} node - The node to check for within this component's child nodes.
-	 * @return {boolean} Returns true if the given node is found, otherwise false.
-	 * @throws {TypeError} value is not an instance of
-	 * @since 1.19.0
-	 */
-	hasNode(node) {
-		if (containChildNode.call(this, validateInstance(node, Node))) {
-			return true;
-		}
-
-		if (!(this.shadowRoot instanceof ShadowRoot)) {
-			return false;
-		}
-
-		return containChildNode.call(this.shadowRoot, node);
-	}
-
-	/**
-	 * Invokes a callback function with the given name and arguments.
-	 *
-	 * @param {string} name - The name of the callback to be executed.
-	 * @param {Array} args - An array of arguments to be passed to the callback function.
-	 * @return {*} The result of the callback function execution.
-	 */
-	callCallback(name, args) {
-		return callControlCallback.call(this, name, ...args);
-	}
+  /**
+   * A new object is created. First, the `initOptions` method is called. Here the
+   * options can be defined in derived classes. Subsequently, the shadowRoot is initialized.
+   *
+   * IMPORTANT: CustomControls instances are not created via the constructor, but either via a tag in the HTML or via <code>document.createElement()</code>.
+   *
+   * @throws {Error} the option attribute does not contain a valid JSON definition.
+   */
+  constructor() {
+    super();
+
+    this[attributeObserverSymbol] = {};
+
+    const options = initOptionsFromAttributes(this, extend({}, this.defaults));
+    if (!isObject(options)) {
+      throw new Error(
+        `The options are not defined correctly in the ${this.getTag()} element.`,
+      );
+    }
+
+    if (this.customization instanceof Map) {
+      const pathfinder = new Pathfinder(options);
+      this.customization.forEach((value, key) => {
+        pathfinder.setVia(key, value);
+      });
+    }
+
+    this[internalSymbol] = new ProxyObserver({ options });
+    this[initMethodSymbol]();
+    initOptionObserver.call(this);
+    this[scriptHostElementSymbol] = [];
+  }
+
+  /**
+   * This method is called by the `instanceof` operator.
+   *
+   * @return {symbol}
+   * @since 2.1.0
+   */
+  static get [instanceSymbol]() {
+    return Symbol.for("@schukai/monster/dom/custom-element@@instance");
+  }
+
+  /**
+   * This method determines which attributes are to be
+   * monitored by `attributeChangedCallback()`. Unfortunately, this method is static.
+   * Therefore, the `observedAttributes` property cannot be changed during runtime.
+   *
+   * @return {string[]}
+   * @since 1.15.0
+   */
+  static get observedAttributes() {
+    return [];
+  }
+
+  /**
+   *
+   * @param attribute
+   * @param callback
+   * @return {CustomElement}
+   */
+  addAttributeObserver(attribute, callback) {
+    validateFunction(callback);
+    this[attributeObserverSymbol][attribute] = callback;
+    return this;
+  }
+
+  /**
+   *
+   * @param attribute
+   * @return {CustomElement}
+   */
+  removeAttributeObserver(attribute) {
+    delete this[attributeObserverSymbol][attribute];
+    return this;
+  }
+
+  /**
+   * The `customization` property allows overwriting the defaults.
+   * Unlike the defaults that expect an object, the customization is a Map.
+   * This also allows overwriting individual values in a deeper structure
+   * without having to redefine the entire structure and thus changing the defaults.
+   * @returns {Map}
+   */
+  get customization() {
+    return new Map();
+  }
+
+  /**
+   * The `defaults` property defines the default values for a control. If you want to override these,
+   * you can use various methods, which are described in the documentation available at
+   * {@link https://monsterjs.orgendocconfigurate-a-monster-control}.
+   *
+   * The individual configuration values are listed below:
+   *
+   * More information about the shadowRoot can be found in the [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/API/Element/attachShadow),
+   * in the [HTML Standard](https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements) or in the [WHATWG Wiki](https://wiki.whatwg.org/wiki/Custom_Elements).
+   *
+   * More information about the template element can be found in the [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template).
+   *
+   * More information about the slot element can be found in the [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot).
+   *
+   * @property {boolean} disabled=false Specifies whether the control is disabled. When present, it makes the element non-mutable, non-focusable, and non-submittable with the form.
+   * @property {string} shadowMode=open Specifies the mode of the shadow root. When set to `open`, elements in the shadow root are accessible from JavaScript outside the root, while setting it to `closed` denies access to the root's nodes from JavaScript outside it.
+   * @property {Boolean} delegatesFocus=true Specifies the behavior of the control with respect to focusability. When set to `true`, it mitigates custom element issues around focusability. When a non-focusable part of the shadow DOM is clicked, the first focusable part is given focus, and the shadow host is given any available :focus styling.
+   * @property {Object} templates Specifies the templates used by the control.
+   * @property {string} templates.main=undefined Specifies the main template used by the control.
+   * @property {Object} templateMapping Specifies the mapping of templates.
+   * @property {Object} templateFormatter Specifies the formatter for the templates.
+   * @property {Object} templateFormatter.marker Specifies the marker for the templates.
+   * @property {Function} templateFormatter.marker.open=null Specifies the opening marker for the templates.
+   * @property {Function} templateFormatter.marker.close=null Specifies the closing marker for the templates.
+   * @property {Boolean} templateFormatter.i18n=false Specifies whether the templates should be formatted with i18n.
+   * @property {Boolean} eventProcessing=false Specifies whether the control processes events.
+   * @since 1.8.0
+   */
+  get defaults() {
+    return {
+      disabled: false,
+      shadowMode: "open",
+      delegatesFocus: true,
+      templates: {
+        main: undefined,
+      },
+      templateMapping: {},
+      templateFormatter: {
+        marker: {
+          open: null,
+          close: null,
+        },
+        i18n: false,
+      },
+
+      eventProcessing: false,
+    };
+  }
+
+  /**
+   * This method updates the labels of the element.
+   * The labels are defined in the option object.
+   * The key of the label is used to retrieve the translation from the document.
+   * If the translation is different from the label, the label is updated.
+   *
+   * Before you can use this method, you must have loaded the translations.
+   *
+   * @return {CustomElement}
+   * @throws {Error}  Cannot find an element with translations. Add a translation object to the document.
+   */
+  updateI18n() {
+    let translations;
+
+    try {
+      translations = getDocumentTranslations();
+    } catch (e) {
+      addErrorAttribute(this, e);
+      return this;
+    }
+
+    if (!translations) {
+      return this;
+    }
+
+    const labels = this.getOption("labels");
+    if (!(isObject(labels) || isIterable(labels))) {
+      return this;
+    }
+
+    for (const key in labels) {
+      const def = labels[key];
+
+      if (isString(def)) {
+        const text = translations.getText(key, def);
+        if (text !== def) {
+          this.setOption(`labels.${key}`, text);
+        }
+        continue;
+      } else if (isObject(def)) {
+        for (const k in def) {
+          const d = def[k];
+
+          const text = translations.getPluralRuleText(key, k, d);
+          if (!isString(text)) {
+            throw new Error("Invalid labels definition");
+          }
+          if (text !== d) {
+            this.setOption(`labels.${key}.${k}`, text);
+          }
+        }
+        continue;
+      }
+
+      throw new Error("Invalid labels definition");
+    }
+    return this;
+  }
+
+  /**
+   * The `getTag()` method returns the tag name associated with the custom element. This method should be overwritten
+   * by the derived class.
+   *
+   * Note that there is no check on the name of the tag in this class. It is the responsibility of
+   * the developer to assign an appropriate tag name. If the name is not valid, the
+   * `registerCustomElement()` method will issue an error.
+   *
+   * @see https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name
+   * @throws {Error} This method must be overridden by the derived class.
+   * @return {string} The tag name associated with the custom element.
+   * @since 1.7.0
+   */
+  static getTag() {
+    throw new Error(
+      "The method `getTag()` must be overridden by the derived class.",
+    );
+  }
+
+  /**
+   * The `getCSSStyleSheet()` method returns a `CSSStyleSheet` object that defines the styles for the custom element.
+   * If the environment does not support the `CSSStyleSheet` constructor, then an object can be built using the provided detour.
+   *
+   * If `undefined` is returned, then the shadow root does not receive a stylesheet.
+   *
+   * Example usage:
+   *
+   * ```js
+   * class MyElement extends CustomElement {
+   *   static getCSSStyleSheet() {
+   *       const sheet = new CSSStyleSheet();
+   *       sheet.replaceSync("p { color: red; }");
+   *       return sheet;
+   *   }
+   * }
+   * ```
+   *
+   * If the environment does not support the `CSSStyleSheet` constructor,
+   * you can use the following workaround to create the stylesheet:
+   *
+   * ```js
+   * const doc = document.implementation.createHTMLDocument('title');
+   * let style = doc.createElement("style");
+   * style.innerHTML = "p { color: red; }";
+   * style.appendChild(document.createTextNode(""));
+   * doc.head.appendChild(style);
+   * return doc.styleSheets[0];
+   * ```
+   *
+   * @return {CSSStyleSheet|CSSStyleSheet[]|string|undefined} A `CSSStyleSheet` object or an array of such objects that define the styles for the custom element, or `undefined` if no stylesheet should be applied.
+   */
+  static getCSSStyleSheet() {
+    return undefined;
+  }
+
+  /**
+   * attach a new observer
+   *
+   * @param {Observer} observer
+   * @return {CustomElement}
+   */
+  attachObserver(observer) {
+    this[internalSymbol].attachObserver(observer);
+    return this;
+  }
+
+  /**
+   * detach a observer
+   *
+   * @param {Observer} observer
+   * @return {CustomElement}
+   */
+  detachObserver(observer) {
+    this[internalSymbol].detachObserver(observer);
+    return this;
+  }
+
+  /**
+   * @param {Observer} observer
+   * @return {ProxyObserver}
+   */
+  containsObserver(observer) {
+    return this[internalSymbol].containsObserver(observer);
+  }
+
+  /**
+   * nested options can be specified by path `a.b.c`
+   *
+   * @param {string} path
+   * @param {*} defaultValue
+   * @return {*}
+   * @since 1.10.0
+   */
+  getOption(path, defaultValue = undefined) {
+    let value;
+
+    try {
+      value = new Pathfinder(
+        this[internalSymbol].getRealSubject()["options"],
+      ).getVia(path);
+    } catch (e) {}
+
+    if (value === undefined) return defaultValue;
+    return value;
+  }
+
+  /**
+   * Set option and inform elements
+   *
+   * @param {string} path
+   * @param {*} value
+   * @return {CustomElement}
+   * @since 1.14.0
+   */
+  setOption(path, value) {
+    new Pathfinder(this[internalSymbol].getSubject()["options"]).setVia(
+      path,
+      value,
+    );
+    return this;
+  }
+
+  /**
+   * @since 1.15.0
+   * @param {string|object} options
+   * @return {CustomElement}
+   */
+  setOptions(options) {
+    if (isString(options)) {
+      options = parseOptionsJSON.call(this, options);
+    }
+    // 2024-01-21: remove this.defaults, otherwise it will overwrite
+    // the current settings that have already been made.
+    // https://gitlab.schukai.com/oss/libraries/javascript/monster/-/issues/136
+    extend(this[internalSymbol].getSubject()["options"], options);
+
+    return this;
+  }
+
+  /**
+   * Is called once via the constructor
+   *
+   * @return {CustomElement}
+   * @since 1.8.0
+   */
+  [initMethodSymbol]() {
+    return this;
+  }
+
+  /**
+   * This method is called once when the object is equipped with update for the dynamic change of the dom.
+   * The functions returned here can be used as pipe functions in the template.
+   *
+   * In the example, the function `my-transformer` is defined. In the template, you can use it as follows:
+   *
+   * ```html
+   * <my-element
+   *   data-monster-option-transformer="path:my-value | call:my-transformer">
+   * </my-element>
+   * ```
+   *
+   * The function `my-transformer` is called with the value of `my-value` as a parameter.
+   *
+   * ```js
+   * class MyElement extends CustomElement {
+   * [updaterTransformerMethodsSymbol]() {
+   *    return {
+   *       "my-transformer": (value) => {
+   *           switch (typeof Wert) {
+   *           case "string":
+   *               return value + "!";
+   *           case "Zahl":
+   *               return value + 1;
+   *           default:
+   *               return value;
+   *           }
+   *    }
+   *    };
+   *  };
+   *  }
+   * ```
+   *
+   * @return {object}
+   * @since 2.43.0
+   */
+  [updaterTransformerMethodsSymbol]() {
+    return {};
+  }
+
+  /**
+   * This method is called once when the object is included in the DOM for the first time. It performs the following actions:
+   *
+   * <ol>
+   * <li>Extracts the options from the attributes and the script tag of the element and sets them.</li>
+   * <li>Initializes the shadow root and its CSS stylesheet (if specified).</li>
+   * <li>Initializes the HTML content of the element.</li>
+   * <li>Initializes the custom elements inside the shadow root and the slotted elements.</li>
+   * <li>Attaches a mutation observer to observe changes to the attributes of the element.</li>
+   *
+   * @return {CustomElement} - The updated custom element.
+   * @since 1.8.0
+   */
+  [assembleMethodSymbol]() {
+    let elements;
+    let nodeList;
+    // Extract options from attributes and set them
+    const AttributeOptions = getOptionsFromAttributes.call(this);
+    if (
+      isObject(AttributeOptions) &&
+      Object.keys(AttributeOptions).length > 0
+    ) {
+      this.setOptions(AttributeOptions);
+    }
+    // Extract options from script tag and set them
+    const ScriptOptions = getOptionsFromScriptTag.call(this);
+    if (isObject(ScriptOptions) && Object.keys(ScriptOptions).length > 0) {
+      this.setOptions(ScriptOptions);
+    }
+    // Initialize the shadow root and its CSS stylesheet
+    if (this.getOption("shadowMode", false) !== false) {
+      try {
+        initShadowRoot.call(this);
+        elements = this.shadowRoot.childNodes;
+      } catch (e) {
+        addErrorAttribute(this, e);
+      }
+      try {
+        initCSSStylesheet.call(this);
+      } catch (e) {
+        addErrorAttribute(this, e);
+      }
+    }
+    // If the elements are not found inside the shadow root, initialize the HTML content of the element
+    if (!(elements instanceof NodeList)) {
+      initHtmlContent.call(this);
+      elements = this.childNodes;
+    }
+    // Initialize the custom elements inside the shadow root and the slotted elements
+    initFromCallbackHost.call(this);
+    try {
+      nodeList = new Set([...elements, ...getSlottedElements.call(this)]);
+    } catch (e) {
+      nodeList = elements;
+    }
+    try {
+      this[updateCloneDataSymbol] = clone(
+        this[internalSymbol].getRealSubject()["options"],
+      );
+    } catch (e) {
+      addErrorAttribute(this, e);
+    }
+    const cfg = {};
+    if (this.getOption("eventProcessing") === true) {
+      cfg.eventProcessing = true;
+    }
+    addObjectWithUpdaterToElement.call(
+      this,
+      nodeList,
+      customElementUpdaterLinkSymbol,
+      this[updateCloneDataSymbol],
+      cfg,
+    );
+    // Attach a mutation observer to observe changes to the attributes of the element
+    attachAttributeChangeMutationObserver.call(this);
+
+    if (isFunction(this[internalSymbol]?.syncDisabledState)) {
+      this[internalSymbol].syncDisabledState();
+    }
+
+    return this;
+  }
+
+  /**
+   * You know what you are doing? This function is only for advanced users.
+   * The result is a clone of the internal data.
+   *
+   * @return {*}
+   */
+  getInternalUpdateCloneData() {
+    return clone(this[updateCloneDataSymbol]);
+  }
+
+  /**
+   * This method is called every time the element is inserted into the DOM. It checks if the custom element
+   * has already been initialized and if not, calls the assembleMethod to initialize it.
+   *
+   * @return {void}
+   * @since 1.7.0
+   * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/connectedCallback
+   */
+  connectedCallback() {
+    // Check if the object has already been initialized
+    if (!hasObjectLink(this, customElementUpdaterLinkSymbol)) {
+      // If not, call the assembleMethod to initialize the object
+      this[assembleMethodSymbol]();
+    }
+  }
+
+  /**
+   * Called every time the element is removed from the DOM. Useful for running clean up code.
+   *
+   * @return {void}
+   * @since 1.7.0
+   */
+  disconnectedCallback() {}
+
+  /**
+   * The custom element has been moved into a new document (e.g. someone called document.adoptNode(el)).
+   *
+   * @return {void}
+   * @since 1.7.0
+   */
+  adoptedCallback() {}
+
+  /**
+   * Called when an observed attribute has been added, removed, updated, or replaced. Also called for initial
+   * values when an element is created by the parser, or upgraded. Note: only attributes listed in the observedAttributes
+   * property will receive this callback.
+   *
+   * @param {string} attrName
+   * @param {string} oldVal
+   * @param {string} newVal
+   * @return {void}
+   * @since 1.15.0
+   */
+  attributeChangedCallback(attrName, oldVal, newVal) {
+    if (attrName.startsWith("data-monster-option-")) {
+      setOptionFromAttribute(
+        this,
+        attrName,
+        this[internalSymbol].getSubject()["options"],
+      );
+    }
+
+    const callback = this[attributeObserverSymbol]?.[attrName];
+    if (isFunction(callback)) {
+      try {
+        callback.call(this, newVal, oldVal);
+      } catch (e) {
+        addErrorAttribute(this, e);
+      }
+    }
+  }
+
+  /**
+   * Checks if the provided node is part of this component's child nodes,
+   * including those within the shadow root, if present.
+   *
+   * @param {Node} node - The node to check for within this component's child nodes.
+   * @return {boolean} Returns true if the given node is found, otherwise false.
+   * @throws {TypeError} value is not an instance of
+   * @since 1.19.0
+   */
+  hasNode(node) {
+    if (containChildNode.call(this, validateInstance(node, Node))) {
+      return true;
+    }
+
+    if (!(this.shadowRoot instanceof ShadowRoot)) {
+      return false;
+    }
+
+    return containChildNode.call(this.shadowRoot, node);
+  }
+
+  /**
+   * Invokes a callback function with the given name and arguments.
+   *
+   * @param {string} name - The name of the callback to be executed.
+   * @param {Array} args - An array of arguments to be passed to the callback function.
+   * @return {*} The result of the callback function execution.
+   */
+  callCallback(name, args) {
+    return callControlCallback.call(this, name, ...args);
+  }
 }
 
 /**
@@ -770,46 +764,46 @@ class CustomElement extends HTMLElement {
  * @return {any}
  */
 function callControlCallback(callBackFunctionName, ...args) {
-	if (!isString(callBackFunctionName) || callBackFunctionName === "") {
-		return;
-	}
-
-	if (callBackFunctionName in this) {
-		return this[callBackFunctionName](this, ...args);
-	}
-
-	if (!this.hasAttribute(ATTRIBUTE_SCRIPT_HOST)) {
-		return;
-	}
-
-	if (this[scriptHostElementSymbol].length === 0) {
-		const targetId = this.getAttribute(ATTRIBUTE_SCRIPT_HOST);
-		if (!targetId) {
-			return;
-		}
-
-		const list = targetId.split(",");
-		for (const id of list) {
-			const host = findElementWithIdUpwards(this, targetId);
-			if (!(host instanceof HTMLElement)) {
-				continue;
-			}
-
-			this[scriptHostElementSymbol].push(host);
-		}
-	}
-
-	for (const host of this[scriptHostElementSymbol]) {
-		if (callBackFunctionName in host) {
-			try {
-				return host[callBackFunctionName](this, ...args);
-			} catch (e) {
-				addErrorAttribute(this, e);
-			}
-		}
-	}
-
-	addErrorAttribute(this, `callback ${callBackFunctionName} not found`);
+  if (!isString(callBackFunctionName) || callBackFunctionName === "") {
+    return;
+  }
+
+  if (callBackFunctionName in this) {
+    return this[callBackFunctionName](this, ...args);
+  }
+
+  if (!this.hasAttribute(ATTRIBUTE_SCRIPT_HOST)) {
+    return;
+  }
+
+  if (this[scriptHostElementSymbol].length === 0) {
+    const targetId = this.getAttribute(ATTRIBUTE_SCRIPT_HOST);
+    if (!targetId) {
+      return;
+    }
+
+    const list = targetId.split(",");
+    for (const id of list) {
+      const host = findElementWithIdUpwards(this, targetId);
+      if (!(host instanceof HTMLElement)) {
+        continue;
+      }
+
+      this[scriptHostElementSymbol].push(host);
+    }
+  }
+
+  for (const host of this[scriptHostElementSymbol]) {
+    if (callBackFunctionName in host) {
+      try {
+        return host[callBackFunctionName](this, ...args);
+      } catch (e) {
+        addErrorAttribute(this, e);
+      }
+    }
+  }
+
+  addErrorAttribute(this, `callback ${callBackFunctionName} not found`);
 }
 
 /**
@@ -826,16 +820,16 @@ function callControlCallback(callBackFunctionName, ...args) {
  * @since 1.8.0
  */
 function initFromCallbackHost() {
-	// Set the default callback function name
-	let callBackFunctionName = initControlCallbackName;
+  // Set the default callback function name
+  let callBackFunctionName = initControlCallbackName;
 
-	// If the `data-monster-option-callback` attribute is set, use its value as the callback function name
-	if (this.hasAttribute(ATTRIBUTE_INIT_CALLBACK)) {
-		callBackFunctionName = this.getAttribute(ATTRIBUTE_INIT_CALLBACK);
-	}
+  // If the `data-monster-option-callback` attribute is set, use its value as the callback function name
+  if (this.hasAttribute(ATTRIBUTE_INIT_CALLBACK)) {
+    callBackFunctionName = this.getAttribute(ATTRIBUTE_INIT_CALLBACK);
+  }
 
-	// Call the callback function with the element as a parameter if it exists
-	callControlCallback.call(this, callBackFunctionName);
+  // Call the callback function with the element as a parameter if it exists
+  callControlCallback.call(this, callBackFunctionName);
 }
 
 /**
@@ -845,34 +839,35 @@ function initFromCallbackHost() {
  * @this CustomElement
  */
 function attachAttributeChangeMutationObserver() {
-	const self = this;
-
-	if (typeof self[attributeMutationObserverSymbol] !== "undefined") {
-		return;
-	}
-
-	self[attributeMutationObserverSymbol] = new MutationObserver(
-		function (mutations, observer) {
-			for (const mutation of mutations) {
-				if (mutation.type === "attributes") {
-					self.attributeChangedCallback(
-						mutation.attributeName,
-						mutation.oldValue,
-						mutation.target.getAttribute(mutation.attributeName),
-					);
-				}
-			}
-		},
-	);
-
-	try {
-		self[attributeMutationObserverSymbol].observe(self, {
-			attributes: true,
-			attributeOldValue: true,
-		});
-	} catch (e) {
-		addErrorAttribute(self, e);
-	}
+  const self = this;
+
+  if (typeof self[attributeMutationObserverSymbol] !== "undefined") {
+    return;
+  }
+
+  self[attributeMutationObserverSymbol] = new MutationObserver(function (
+    mutations,
+    observer,
+  ) {
+    for (const mutation of mutations) {
+      if (mutation.type === "attributes") {
+        self.attributeChangedCallback(
+          mutation.attributeName,
+          mutation.oldValue,
+          mutation.target.getAttribute(mutation.attributeName),
+        );
+      }
+    }
+  });
+
+  try {
+    self[attributeMutationObserverSymbol].observe(self, {
+      attributes: true,
+      attributeOldValue: true,
+    });
+  } catch (e) {
+    addErrorAttribute(self, e);
+  }
 }
 
 /**
@@ -882,111 +877,118 @@ function attachAttributeChangeMutationObserver() {
  * @return {boolean}
  */
 function containChildNode(node) {
-	if (this.contains(node)) {
-		return true;
-	}
+  if (this.contains(node)) {
+    return true;
+  }
 
-	for (const [, e] of Object.entries(this.childNodes)) {
-		if (e.contains(node)) {
-			return true;
-		}
+  for (const [, e] of Object.entries(this.childNodes)) {
+    if (e.contains(node)) {
+      return true;
+    }
 
-		containChildNode.call(e, node);
-	}
+    containChildNode.call(e, node);
+  }
 
-	return false;
+  return false;
 }
 
+
 /**
  * @license AGPLv3
- * @since 1.15.0
+ * @since 4.43.0
  * @private
  * @this CustomElement
  */
 function initOptionObserver() {
-	const self = this;
-
-	let lastDisabledValue = undefined;
-	self.attachObserver(
-		new Observer(function () {
-			const flag = self.getOption("disabled");
-
-			if (flag === lastDisabledValue) {
-				return;
-			}
-
-			lastDisabledValue = flag;
-
-			if (!(self.shadowRoot instanceof ShadowRoot)) {
-				return;
-			}
-
-			const query =
-				"button, command, fieldset, keygen, optgroup, option, select, textarea, input, [data-monster-objectlink]";
-			const elements = self.shadowRoot.querySelectorAll(query);
-
-			let nodeList;
-			try {
-				nodeList = new Set([
-					...elements,
-					...getSlottedElements.call(self, query),
-				]);
-			} catch (e) {
-				nodeList = elements;
-			}
-
-			for (const element of [...nodeList]) {
-				if (flag === true) {
-					element.setAttribute(ATTRIBUTE_DISABLED, "");
-				} else {
-					element.removeAttribute(ATTRIBUTE_DISABLED);
-				}
-			}
-		}),
-	);
-
-	self.attachObserver(
-		new Observer(function () {
-			// not initialised
-			if (!hasObjectLink(self, customElementUpdaterLinkSymbol)) {
-				return;
-			}
-			// inform every element
-			const updaters = getLinkedObjects(self, customElementUpdaterLinkSymbol);
-
-			for (const list of updaters) {
-				for (const updater of list) {
-					const d = clone(self[internalSymbol].getRealSubject()["options"]);
-					Object.assign(updater.getSubject(), d);
-				}
-			}
-		}),
-	);
-
-	// disabled
-	self[attributeObserverSymbol][ATTRIBUTE_DISABLED] = () => {
-		if (self.hasAttribute(ATTRIBUTE_DISABLED)) {
-			self.setOption(ATTRIBUTE_DISABLED, true);
-		} else {
-			self.setOption(ATTRIBUTE_DISABLED, undefined);
-		}
-	};
-
-	// data-monster-options
-	self[attributeObserverSymbol][ATTRIBUTE_OPTIONS] = () => {
-		const options = getOptionsFromAttributes.call(self);
-		if (isObject(options) && Object.keys(options).length > 0) {
-			self.setOptions(options);
-		}
-	};
-
-	// data-monster-options-selector
-	self[attributeObserverSymbol][ATTRIBUTE_OPTIONS_SELECTOR] = () => {
-		const options = getOptionsFromScriptTag.call(self);
-		if (isObject(options) && Object.keys(options).length > 0) {
-			self.setOptions(options);
-		}
-	};
+  const self = this;
+
+  self[internalSymbol].lastDisabledValue = undefined;
+
+  const syncDisabledState = () => {
+    const flag = self.getOption("disabled", false); 
+
+    if (flag === self[internalSymbol].lastDisabledValue) {
+      return;
+    }
+
+    if (!(self.shadowRoot instanceof ShadowRoot) && !self.childNodes.length) {
+      return;
+    }
+
+    self[internalSymbol].lastDisabledValue = flag;
+
+    const query =
+      "button, command, fieldset, keygen, optgroup, option, select, textarea, input, [data-monster-objectlink]";
+
+    let elements = [];
+    if (self.shadowRoot instanceof ShadowRoot) {
+      elements = self.shadowRoot.querySelectorAll(query);
+    }
+
+    let nodeList;
+    try {
+      const baseElements =
+        elements.length > 0 ? elements : self.querySelectorAll(query);
+      nodeList = new Set([
+        ...baseElements,
+        ...getSlottedElements.call(self, query),
+      ]);
+    } catch (e) {
+      nodeList = elements;
+    }
+
+    for (const element of [...nodeList]) {
+      if (flag === true) {
+        element.setAttribute(ATTRIBUTE_DISABLED, "");
+      } else {
+        element.removeAttribute(ATTRIBUTE_DISABLED);
+      }
+    }
+  };
+
+  self.attachObserver(
+    new Observer(syncDisabledState),
+  );
+
+  self[internalSymbol].syncDisabledState = syncDisabledState;
+
+  self.attachObserver(
+    new Observer(function () {
+      if (!hasObjectLink(self, customElementUpdaterLinkSymbol)) {
+        return;
+      }
+      const updaters = getLinkedObjects(self, customElementUpdaterLinkSymbol);
+
+      for (const list of updaters) {
+        for (const updater of list) {
+          const d = clone(self[internalSymbol].getRealSubject()["options"]);
+          Object.assign(updater.getSubject(), d);
+        }
+      }
+    }),
+  );
+
+  self[attributeObserverSymbol][ATTRIBUTE_DISABLED] = () => {
+    if (self.hasAttribute(ATTRIBUTE_DISABLED)) {
+      self.setOption(ATTRIBUTE_DISABLED, true);
+    } else {
+      self.setOption(ATTRIBUTE_DISABLED, false);
+    }
+  };
+
+  self[attributeObserverSymbol][ATTRIBUTE_OPTIONS] = () => {
+    const options = getOptionsFromAttributes.call(self);
+    if (isObject(options) && Object.keys(options).length > 0) {
+      self.setOptions(options);
+    }
+  };
+
+  self[attributeObserverSymbol][ATTRIBUTE_OPTIONS_SELECTOR] = () => {
+    const options = getOptionsFromScriptTag.call(self);
+    if (isObject(options) && Object.keys(options).length > 0) {
+      self.setOptions(options);
+    }
+  };
 }
 
 /**
@@ -995,35 +997,35 @@ function initOptionObserver() {
  * @throws {TypeError} value is not an object
  */
 function getOptionsFromScriptTag() {
-	if (!this.hasAttribute(ATTRIBUTE_OPTIONS_SELECTOR)) {
-		return {};
-	}
-
-	const node = document.querySelector(
-		this.getAttribute(ATTRIBUTE_OPTIONS_SELECTOR),
-	);
-	if (!(node instanceof HTMLScriptElement)) {
-		addErrorAttribute(
-			this,
-			`the selector ${ATTRIBUTE_OPTIONS_SELECTOR} for options was specified (${this.getAttribute(
-				ATTRIBUTE_OPTIONS_SELECTOR,
-			)}) but not found.`,
-		);
-		return {};
-	}
-
-	let obj = {};
-
-	try {
-		obj = parseOptionsJSON.call(this, node.textContent.trim());
-	} catch (e) {
-		addErrorAttribute(
-			this,
-			`when analyzing the configuration from the script tag there was an error. ${e}`,
-		);
-	}
-
-	return obj;
+  if (!this.hasAttribute(ATTRIBUTE_OPTIONS_SELECTOR)) {
+    return {};
+  }
+
+  const node = document.querySelector(
+    this.getAttribute(ATTRIBUTE_OPTIONS_SELECTOR),
+  );
+  if (!(node instanceof HTMLScriptElement)) {
+    addErrorAttribute(
+      this,
+      `the selector ${ATTRIBUTE_OPTIONS_SELECTOR} for options was specified (${this.getAttribute(
+        ATTRIBUTE_OPTIONS_SELECTOR,
+      )}) but not found.`,
+    );
+    return {};
+  }
+
+  let obj = {};
+
+  try {
+    obj = parseOptionsJSON.call(this, node.textContent.trim());
+  } catch (e) {
+    addErrorAttribute(
+      this,
+      `when analyzing the configuration from the script tag there was an error. ${e}`,
+    );
+  }
+
+  return obj;
 }
 
 /**
@@ -1031,29 +1033,29 @@ function getOptionsFromScriptTag() {
  * @return {object}
  */
 function getOptionsFromAttributes() {
-	if (
-		this.hasAttribute(ATTRIBUTE_DISABLED) &&
-		this.getAttribute(ATTRIBUTE_DISABLED) !== null
-	) {
-		this.setOption(ATTRIBUTE_DISABLED, true);
-	} else {
-		this.setOption(ATTRIBUTE_DISABLED, undefined);
-	}
-
-	if (this.hasAttribute(ATTRIBUTE_OPTIONS)) {
-		try {
-			return parseOptionsJSON.call(this, this.getAttribute(ATTRIBUTE_OPTIONS));
-		} catch (e) {
-			addErrorAttribute(
-				this,
-				`the options attribute ${ATTRIBUTE_OPTIONS} does not contain a valid json definition (actual: ${this.getAttribute(
-					ATTRIBUTE_OPTIONS,
-				)}).${e}`,
-			);
-		}
-	}
-
-	return {};
+  if (
+    this.hasAttribute(ATTRIBUTE_DISABLED) &&
+    this.getAttribute(ATTRIBUTE_DISABLED) !== null
+  ) {
+    this.setOption(ATTRIBUTE_DISABLED, true);
+  } else {
+    this.setOption(ATTRIBUTE_DISABLED, undefined);
+  }
+
+  if (this.hasAttribute(ATTRIBUTE_OPTIONS)) {
+    try {
+      return parseOptionsJSON.call(this, this.getAttribute(ATTRIBUTE_OPTIONS));
+    } catch (e) {
+      addErrorAttribute(
+        this,
+        `the options attribute ${ATTRIBUTE_OPTIONS} does not contain a valid json definition (actual: ${this.getAttribute(
+          ATTRIBUTE_OPTIONS,
+        )}).${e}`,
+      );
+    }
+  }
+
+  return {};
 }
 
 /**
@@ -1065,25 +1067,25 @@ function getOptionsFromAttributes() {
  * @throws {error} Throws an error if the JSON data is not valid.
  */
 function parseOptionsJSON(data) {
-	let obj = {};
+  let obj = {};
 
-	if (!isString(data)) {
-		return obj;
-	}
+  if (!isString(data)) {
+    return obj;
+  }
 
-	// the configuration can be specified as a data url.
-	try {
-		const dataUrl = parseDataURL(data);
-		data = dataUrl.content;
-	} catch (e) {}
+  // the configuration can be specified as a data url.
+  try {
+    const dataUrl = parseDataURL(data);
+    data = dataUrl.content;
+  } catch (e) {}
 
-	try {
-		obj = JSON.parse(data);
-	} catch (e) {
-		throw e;
-	}
+  try {
+    obj = JSON.parse(data);
+  } catch (e) {
+    throw e;
+  }
 
-	return validateObject(obj);
+  return validateObject(obj);
 }
 
 /**
@@ -1092,18 +1094,18 @@ function parseOptionsJSON(data) {
  * @returns {*|string}
  */
 function substituteI18n(html) {
-	if (!this.getOption("templateFormatter.i18n", false)) {
-		return html;
-	}
-
-	const labels = this.getOption("labels", {});
-	if (!(isObject(labels) || isIterable(labels))) {
-		return html;
-	}
-
-	const formatter = new Formatter(labels, {});
-	formatter.setMarker("i18n{", "}");
-	return formatter.format(html);
+  if (!this.getOption("templateFormatter.i18n", false)) {
+    return html;
+  }
+
+  const labels = this.getOption("labels", {});
+  if (!(isObject(labels) || isIterable(labels))) {
+    return html;
+  }
+
+  const formatter = new Formatter(labels, {});
+  formatter.setMarker("i18n{", "}");
+  return formatter.format(html);
 }
 
 /**
@@ -1111,21 +1113,21 @@ function substituteI18n(html) {
  * @return {initHtmlContent}
  */
 function initHtmlContent() {
-	try {
-		const template = findDocumentTemplate(this.constructor.getTag());
-		this.appendChild(template.createDocumentFragment());
-	} catch (e) {
-		let html = this.getOption("templates.main", "");
-		if (isString(html) && html.length > 0) {
-			const mapping = this.getOption("templateMapping", {});
-			if (isObject(mapping)) {
-				html = new Formatter(mapping, {}).format(html);
-			}
-			this.innerHTML = substituteI18n.call(this, html);
-		}
-	}
-
-	return this;
+  try {
+    const template = findDocumentTemplate(this.constructor.getTag());
+    this.appendChild(template.createDocumentFragment());
+  } catch (e) {
+    let html = this.getOption("templates.main", "");
+    if (isString(html) && html.length > 0) {
+      const mapping = this.getOption("templateMapping", {});
+      if (isObject(mapping)) {
+        html = new Formatter(mapping, {}).format(html);
+      }
+      this.innerHTML = substituteI18n.call(this, html);
+    }
+  }
+
+  return this;
 }
 
 /**
@@ -1137,49 +1139,49 @@ function initHtmlContent() {
  * @throws {TypeError} value is not an instance of
  */
 function initCSSStylesheet() {
-	if (!(this.shadowRoot instanceof ShadowRoot)) {
-		return this;
-	}
-
-	const styleSheet = this.constructor.getCSSStyleSheet();
-
-	if (styleSheet instanceof CSSStyleSheet) {
-		if (styleSheet.cssRules.length > 0) {
-			this.shadowRoot.adoptedStyleSheets = [styleSheet];
-		}
-	} else if (isArray(styleSheet)) {
-		const assign = [];
-		for (const s of styleSheet) {
-			if (isString(s)) {
-				const trimedStyleSheet = s.trim();
-				if (trimedStyleSheet !== "") {
-					const style = document.createElement("style");
-					style.innerHTML = trimedStyleSheet;
-					this.shadowRoot.prepend(style);
-				}
-				continue;
-			}
-
-			validateInstance(s, CSSStyleSheet);
-
-			if (s.cssRules.length > 0) {
-				assign.push(s);
-			}
-		}
-
-		if (assign.length > 0) {
-			this.shadowRoot.adoptedStyleSheets = assign;
-		}
-	} else if (isString(styleSheet)) {
-		const trimedStyleSheet = styleSheet.trim();
-		if (trimedStyleSheet !== "") {
-			const style = document.createElement("style");
-			style.innerHTML = styleSheet;
-			this.shadowRoot.prepend(style);
-		}
-	}
-
-	return this;
+  if (!(this.shadowRoot instanceof ShadowRoot)) {
+    return this;
+  }
+
+  const styleSheet = this.constructor.getCSSStyleSheet();
+
+  if (styleSheet instanceof CSSStyleSheet) {
+    if (styleSheet.cssRules.length > 0) {
+      this.shadowRoot.adoptedStyleSheets = [styleSheet];
+    }
+  } else if (isArray(styleSheet)) {
+    const assign = [];
+    for (const s of styleSheet) {
+      if (isString(s)) {
+        const trimedStyleSheet = s.trim();
+        if (trimedStyleSheet !== "") {
+          const style = document.createElement("style");
+          style.innerHTML = trimedStyleSheet;
+          this.shadowRoot.prepend(style);
+        }
+        continue;
+      }
+
+      validateInstance(s, CSSStyleSheet);
+
+      if (s.cssRules.length > 0) {
+        assign.push(s);
+      }
+    }
+
+    if (assign.length > 0) {
+      this.shadowRoot.adoptedStyleSheets = assign;
+    }
+  } else if (isString(styleSheet)) {
+    const trimedStyleSheet = styleSheet.trim();
+    if (trimedStyleSheet !== "") {
+      const style = document.createElement("style");
+      style.innerHTML = styleSheet;
+      this.shadowRoot.prepend(style);
+    }
+  }
+
+  return this;
 }
 
 /**
@@ -1191,42 +1193,42 @@ function initCSSStylesheet() {
  * @since 1.8.0
  */
 function initShadowRoot() {
-	let template;
-	let html;
-
-	try {
-		template = findDocumentTemplate(this.constructor.getTag());
-	} catch (e) {
-		html = this.getOption("templates.main", "");
-		if (!isString(html) || html === undefined || html === "") {
-			throw new Error("html is not set.");
-		}
-	}
-
-	this.attachShadow({
-		mode: this.getOption("shadowMode", "open"),
-		delegatesFocus: this.getOption("delegatesFocus", true),
-	});
-
-	if (template instanceof Template) {
-		this.shadowRoot.appendChild(template.createDocumentFragment());
-		return this;
-	}
-
-	const mapping = this.getOption("templateMapping", {});
-	if (isObject(mapping)) {
-		const formatter = new Formatter(mapping);
-		if (this.getOption("templateFormatter.marker.open") !== null) {
-			formatter.setMarker(
-				this.getOption("templateFormatter.marker.open"),
-				this.getOption("templateFormatter.marker.close"),
-			);
-		}
-		html = formatter.format(html);
-	}
-
-	this.shadowRoot.innerHTML = substituteI18n.call(this, html);
-	return this;
+  let template;
+  let html;
+
+  try {
+    template = findDocumentTemplate(this.constructor.getTag());
+  } catch (e) {
+    html = this.getOption("templates.main", "");
+    if (!isString(html) || html === undefined || html === "") {
+      throw new Error("html is not set.");
+    }
+  }
+
+  this.attachShadow({
+    mode: this.getOption("shadowMode", "open"),
+    delegatesFocus: this.getOption("delegatesFocus", true),
+  });
+
+  if (template instanceof Template) {
+    this.shadowRoot.appendChild(template.createDocumentFragment());
+    return this;
+  }
+
+  const mapping = this.getOption("templateMapping", {});
+  if (isObject(mapping)) {
+    const formatter = new Formatter(mapping);
+    if (this.getOption("templateFormatter.marker.open") !== null) {
+      formatter.setMarker(
+        this.getOption("templateFormatter.marker.open"),
+        this.getOption("templateFormatter.marker.close"),
+      );
+    }
+    html = formatter.format(html);
+  }
+
+  this.shadowRoot.innerHTML = substituteI18n.call(this, html);
+  return this;
 }
 
 /**
@@ -1240,20 +1242,20 @@ function initShadowRoot() {
  * @throws {DOMException} Failed to execute 'define' on 'CustomElementRegistry': is not a valid custom element name
  */
 function registerCustomElement(element) {
-	validateFunction(element);
-	const customElements = getGlobalObject("customElements");
-	if (customElements === undefined) {
-		throw new Error("customElements is not supported.");
-	}
-
-	const tag = element?.getTag();
-	if (!isString(tag) || tag === "") {
-		throw new Error("tag is not set.");
-	}
-
-	if (customElements.get(tag) !== undefined) {
-		return;
-	}
-
-	customElements.define(tag, element);
+  validateFunction(element);
+  const customElements = getGlobalObject("customElements");
+  if (customElements === undefined) {
+    throw new Error("customElements is not supported.");
+  }
+
+  const tag = element?.getTag();
+  if (!isString(tag) || tag === "") {
+    throw new Error("tag is not set.");
+  }
+
+  if (customElements.get(tag) !== undefined) {
+    return;
+  }
+
+  customElements.define(tag, element);
 }