@schukai/monster 3.44.1 → 3.47.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@schukai/monster",
-  "version": "3.44.1",
+  "version": "3.47.0",
   "description": "Monster is a simple library for creating fast, robust and lightweight websites.",
   "keywords": [
     "framework",

package/source/dom/constants.mjs

@@ -59,6 +59,9 @@ export {
     ATTRIBUTE_HIDDEN,
     objectUpdaterLinkSymbol,
     customElementUpdaterLinkSymbol,
+    optionCallbackName,
+    ATTRIBUTE_SCRIPT_HOST,
+    ATTRIBUTE_OPTION_CALLBACK
 };
 
 /**
@@ -86,6 +89,16 @@ const ATTRIBUTE_PREFIX = "data-monster-";
  */
 const ATTRIBUTE_OPTIONS = `${ATTRIBUTE_PREFIX}options`;
 
+/**
+ * This is name of the attribute to pass the script host to a control
+ *
+ * @memberOf Monster.DOM
+ * @license AGPLv3
+ * @since 3.48.0
+ * @type {string}
+ */
+const ATTRIBUTE_SCRIPT_HOST = `${ATTRIBUTE_PREFIX}script-host`;
+
 /**
  * This is the name of the attribute to pass options to a control
  *
@@ -96,6 +109,26 @@ const ATTRIBUTE_OPTIONS = `${ATTRIBUTE_PREFIX}options`;
  */
 const ATTRIBUTE_OPTIONS_SELECTOR = `${ATTRIBUTE_PREFIX}options-selector`;
 
+/**
+ * This is the name of the attribute to pass the callback to a control
+ *
+ * @memberOf Monster.DOM
+ * @license AGPLv3
+ * @since 3.48.0
+ * @type {string}
+ */
+const ATTRIBUTE_OPTION_CALLBACK = `${ATTRIBUTE_PREFIX}option-callback`;
+
+/**
+ * This is the name of the callback to pass the callback to a control
+ *
+ * @memberOf Monster.DOM
+ * @license AGPLv3
+ * @since 3.48.0
+ * @type {string}
+ */
+const optionCallbackName = `initCustomControlOptionsCallback`;
+
 /**
  * @memberOf Monster.DOM
  * @type {string}

package/source/dom/customcontrol.mjs

@@ -5,11 +5,12 @@
  * License text available at https://www.gnu.org/licenses/agpl-3.0.en.html
  */
 
-import { extend } from "../data/extend.mjs";
-import { ATTRIBUTE_VALUE } from "./constants.mjs";
-import { CustomElement, attributeObserverSymbol } from "./customelement.mjs";
-import { instanceSymbol } from "../constants.mjs";
-export { CustomControl };
+import {extend} from "../data/extend.mjs";
+import {ATTRIBUTE_VALUE} from "./constants.mjs";
+import {CustomElement, attributeObserverSymbol} from "./customelement.mjs";
+import {instanceSymbol} from "../constants.mjs";
+
+export {CustomControl};
 
 /**
  * @private
@@ -41,6 +42,7 @@ const attachedInternalSymbol = Symbol("attachedInternal");
  * @see {@link https://www.npmjs.com/package/element-internals-polyfill}
  * @see {@link https://github.com/WICG/webcomponents}
  * @see {@link https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements}
+ * @see {@link https://html.spec.whatwg.org/dev/custom-elements.html#custom-element-reactions}
  * @license AGPLv3
  * @since 1.14.0
  * @copyright schukai GmbH
@@ -74,7 +76,7 @@ class CustomControl extends CustomElement {
      * @since 2.1.0
      */
     static get [instanceSymbol]() {
-        return Symbol.for("@schukai/monster/dom/custom-control");
+        return Symbol.for("@schukai/monster/dom/custom-control@@instance");
     }
 
     /**
@@ -84,20 +86,18 @@ class CustomControl extends CustomElement {
      * @since 1.15.0
      */
     static get observedAttributes() {
-        const list = super.observedAttributes;
-        list.push(ATTRIBUTE_VALUE);
-        return list;
+        return super.observedAttributes;
     }
 
     /**
+     * Adding a static formAssociated property, with a true value, makes an autonomous custom element a form-associated custom element.
      *
      * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/attachInternals}
+     * @see {@link https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-face-example}
      * @since 1.14.0
      * @return {boolean}
      */
-    static get formAssociated() {
-        return true;
-    }
+    static formAssociated = true
 
     /**
      * Derived classes can override and extend this method as follows.
@@ -116,7 +116,8 @@ class CustomControl extends CustomElement {
      * @since 1.14.0
      */
     get defaults() {
-        return extend({}, super.defaults);
+        return extend({
+        }, super.defaults);
     }
 
     /**
@@ -298,6 +299,46 @@ class CustomControl extends CustomElement {
     reportValidity() {
         return getInternal.call(this)?.reportValidity();
     }
+
+    /**
+     * @param {string} form
+     */
+    formAssociatedCallback(form) {
+        if (form) {
+            if(form.id) {
+                this.setAttribute("form", form.id);    
+            }
+        } else {
+            this.removeAttribute("form");
+        }
+    }
+
+    /**
+     * @param {string} disabled
+     */
+    formDisabledCallback(disabled) {
+        if (disabled) {
+            this.setAttribute("disabled", "");
+        } else {
+            this.removeAttribute("disabled");
+        }
+    }
+
+    /**
+     * @param {string} state
+     * @param {string} mode
+     */
+    formStateRestoreCallback(state, mode) {
+        
+    }
+
+    /**
+     *
+     */
+    formResetCallback() {
+       this.value = "";
+    }
+
 }
 
 /**
@@ -313,7 +354,7 @@ function getInternal() {
         throw new Error("ElementInternals is not supported and a polyfill is necessary");
     }
 
-    return this[attachedInternalSymbol];
+    return self[attachedInternalSymbol];
 }
 
 /**

package/source/dom/customelement.mjs

@@ -5,6 +5,7 @@
  * License text available at https://www.gnu.org/licenses/agpl-3.0.en.html
  */
 
+import {findElementWithIdUpwards} from "./util.mjs";
 import {internalSymbol} from "../constants.mjs";
 import {extend} from "../data/extend.mjs";
 import {Pathfinder} from "../data/pathfinder.mjs";
@@ -22,8 +23,11 @@ import {
     ATTRIBUTE_DISABLED,
     ATTRIBUTE_ERRORMESSAGE,
     ATTRIBUTE_OPTIONS,
+    ATTRIBUTE_OPTION_CALLBACK,
     ATTRIBUTE_OPTIONS_SELECTOR,
+    ATTRIBUTE_SCRIPT_HOST,
     customElementUpdaterLinkSymbol,
+    optionCallbackName
 } from "./constants.mjs";
 import {findDocumentTemplate, Template} from "./template.mjs";
 import {addObjectWithUpdaterToElement} from "./updater.mjs";
@@ -31,6 +35,7 @@ import {instanceSymbol} from "../constants.mjs";
 import {getDocumentTranslations, Translations} from "../i18n/translations.mjs";
 import {getSlottedElements} from "./slotted.mjs";
 import {initOptionsFromAttributes} from "./util/init-options-from-attributes.mjs";
+import {setOptionFromAttribute} from "./util/set-option-from-attribute.mjs";
 
 export {
     CustomElement,
@@ -66,6 +71,12 @@ const attributeObserverSymbol = Symbol.for("@schukai/monster/dom/@@attributeObse
  */
 const attributeMutationObserverSymbol = Symbol("@schukai/monster/dom/@@mutationObserver");
 
+/**
+ * @private
+ * @type {symbol}
+ */
+const scriptHostElementSymbol = Symbol("scriptHostElement");
+
 /**
  * HTMLElement
  * @external HTMLElement
@@ -211,6 +222,7 @@ class CustomElement extends HTMLElement {
         });
         this[initMethodSymbol]();
         initOptionObserver.call(this);
+        this[scriptHostElementSymbol] = [];
 
     }
 
@@ -220,7 +232,7 @@ class CustomElement extends HTMLElement {
      * @since 2.1.0
      */
     static get [instanceSymbol]() {
-        return Symbol.for("@schukai/monster/dom/custom-element");
+        return Symbol.for("@schukai/monster/dom/custom-element@@instance");
     }
 
     /**
@@ -232,7 +244,7 @@ class CustomElement extends HTMLElement {
      * @since 1.15.0
      */
     static get observedAttributes() {
-        return [ATTRIBUTE_OPTIONS, ATTRIBUTE_DISABLED];
+        return [];
     }
 
     /**
@@ -309,7 +321,7 @@ class CustomElement extends HTMLElement {
      */
     get defaults() {
         return {
-            ATTRIBUTE_DISABLED: this.getAttribute(ATTRIBUTE_DISABLED),
+            disabled: false,
             shadowMode: "open",
             delegatesFocus: true,
             templates: {
@@ -519,6 +531,7 @@ class CustomElement extends HTMLElement {
             self.setOptions(ScriptOptions);
         }
 
+
         if (self.getOption("shadowMode", false) !== false) {
             try {
                 initShadowRoot.call(self);
@@ -540,6 +553,8 @@ class CustomElement extends HTMLElement {
             }
         }
 
+        initFromCallbackHost.call(this);
+
         try {
             nodeList = new Set([...elements, ...getSlottedElements.call(self)]);
         } catch (e) {
@@ -605,8 +620,11 @@ class CustomElement extends HTMLElement {
     attributeChangedCallback(attrName, oldVal, newVal) {
         const self = this;
 
-        const callback = self[attributeObserverSymbol]?.[attrName];
+        if (attrName.startsWith("data-monster-option-")) {
+            setOptionFromAttribute(self, attrName, this[internalSymbol].getSubject()["options"])
+        }
 
+        const callback = self[attributeObserverSymbol]?.[attrName];
         if (isFunction(callback)) {
             try {
                 callback.call(self, newVal, oldVal);
@@ -637,6 +655,99 @@ class CustomElement extends HTMLElement {
 
         return containChildNode.call(self.shadowRoot, node);
     }
+
+    /**
+     * Calls a callback function if it exists.
+     * 
+     * @param {string} name
+     * @param {*} args
+     * @returns {*}
+     */
+    callCallback(name, args) {
+        const self = this;
+        return callControlCallback.call(self, name, ...args);
+    }
+
+
+}
+
+/**
+ * @param {string} callBackFunctionName
+ * @param {*}  args
+ * @return {any}
+ */
+function callControlCallback(callBackFunctionName, ...args) {
+    const self = this;
+
+    if (!isString(callBackFunctionName) || callBackFunctionName === "") {
+        return;
+    }
+
+    if (callBackFunctionName in self) {
+        return self[callBackFunctionName](self, ...args);
+        
+    }
+
+    if (!self.hasAttribute(ATTRIBUTE_SCRIPT_HOST)) {
+        return;
+    }
+
+    if (self[scriptHostElementSymbol].length === 0) {
+
+        const targetId = self.getAttribute(ATTRIBUTE_SCRIPT_HOST);
+        if (!targetId) {
+            return;
+        }
+
+        const list = targetId.split(",")
+        for (const id of list) {
+            const host = findElementWithIdUpwards(self, targetId);
+            if (!(host instanceof HTMLElement)) {
+                continue;
+            }
+
+            self[scriptHostElementSymbol].push(host);
+        }
+    }
+
+    for (const host of self[scriptHostElementSymbol]) {
+        if (callBackFunctionName in host) {
+            try {
+                return host[callBackFunctionName](self, ...args);
+            } catch (e) {
+                addAttributeToken(self, ATTRIBUTE_ERRORMESSAGE, e.toString());
+            }
+        }
+    }
+
+    addAttributeToken(self, ATTRIBUTE_ERRORMESSAGE, `callback ${callBackFunctionName} not found`);
+
+}
+
+/**
+ * This Function is called when the element is attached to the DOM.
+ *
+ * It looks for the attribute `data-monster-option-callback`. Is this attribute is not set, the default callback
+ * `initCustomControlOptionsCallback` is called.
+ *
+ * The callback is searched in this element and in the host element. If the callback is found, it is called with the
+ * element as parameter.
+ *
+ * The `monster
+ *
+ * @this CustomElement
+ */
+function initFromCallbackHost() {
+    const self = this;
+
+    let callBackFunctionName = optionCallbackName // default callback
+    if (self.hasAttribute(ATTRIBUTE_OPTION_CALLBACK)) {
+        callBackFunctionName = self.getAttribute(ATTRIBUTE_OPTION_CALLBACK);
+    }
+
+    callControlCallback.call(self, callBackFunctionName);
+
+
 }
 
 /**

package/source/dom/util/extract-keys.mjs

@@ -0,0 +1,39 @@
+/**
+ * Copyright schukai GmbH and contributors 2023. All Rights Reserved.
+ * Node module: @schukai/monster
+ * This file is licensed under the AGPLv3 License.
+ * License text available at https://www.gnu.org/licenses/agpl-3.0.en.html
+ */
+
+export {extractKeys}
+
+/**
+ * Extracts the keys from the given object and returns a map with the keys and values.
+ *
+ * @private
+ * @param {object} obj
+ * @param {string} keyPrefix
+ * @param {string} keySeparator
+ * @param {string} valueSeparator
+ * @returns {Map<any, any>}
+ */
+function extractKeys(obj, keyPrefix = '', keySeparator = '-', valueSeparator = '.') {
+    const resultMap = new Map();
+
+    function helper(currentObj, currentKeyPrefix, currentValuePrefix) {
+        for (const key in currentObj) {
+            if (typeof currentObj[key] === 'object' && !Array.isArray(currentObj[key])) {
+                const newKeyPrefix = currentKeyPrefix ? currentKeyPrefix + keySeparator + key.toLowerCase() : key.toLowerCase();
+                const newValuePrefix = currentValuePrefix ? currentValuePrefix + valueSeparator + key : key;
+                helper(currentObj[key], newKeyPrefix, newValuePrefix);
+            } else {
+                const finalKey = currentKeyPrefix ? currentKeyPrefix + keySeparator + key.toLowerCase() : key.toLowerCase();
+                const finalValue = currentValuePrefix ? currentValuePrefix + valueSeparator + key : key;
+                resultMap.set(finalKey, finalValue);
+            }
+        }
+    }
+
+    helper(obj, keyPrefix, keyPrefix);
+    return resultMap;
+}

package/source/dom/util/init-options-from-attributes.mjs

@@ -8,6 +8,7 @@
 import {Pathfinder} from '../../data/pathfinder.mjs';
 import {isFunction} from '../../types/is.mjs';
 import {attributeObserverSymbol} from "../customelement.mjs";
+import {extractKeys} from "./extract-keys.mjs";
 
 export {initOptionsFromAttributes};
 
@@ -75,63 +76,10 @@ function initOptionsFromAttributes(element, options, mapping = {}, prefix = 'dat
             }
 
             finder.setVia(optionName, value);
-
-            // if element has an attribute observer, then register the attribute observer
-            if (element?.[attributeObserverSymbol]) {
-                element[attributeObserverSymbol][name] = (newValue, oldValue) => {
-
-                    if (newValue === oldValue) return;
-
-                    let changedValue = newValue;
-
-                    if (typeOfOptionValue === 'boolean') {
-                        changedValue = changedValue === 'true';
-                    } else if (typeOfOptionValue === 'number') {
-                        changedValue = Number(changedValue);
-                    } else if (typeOfOptionValue === 'string') {
-                        changedValue = String(changedValue);
-                    } else if (typeOfOptionValue === 'object') {
-                        changedValue = JSON.parse(changedValue);
-                    }
-
-                    finder.setVia(optionName, changedValue);
-                }
-            }
-
-
         }
     })
 
     return options;
 }
 
-/**
- * Extracts the keys from the given object and returns a map with the keys and values.
- *
- * @private
- * @param {object} obj
- * @param {string} keyPrefix
- * @param {string} keySeparator
- * @param {string} valueSeparator
- * @returns {Map<any, any>}
- */
-function extractKeys(obj, keyPrefix = '', keySeparator = '-', valueSeparator = '.') {
-    const resultMap = new Map();
 
-    function helper(currentObj, currentKeyPrefix, currentValuePrefix) {
-        for (const key in currentObj) {
-            if (typeof currentObj[key] === 'object' && !Array.isArray(currentObj[key])) {
-                const newKeyPrefix = currentKeyPrefix ? currentKeyPrefix + keySeparator + key.toLowerCase() : key.toLowerCase();
-                const newValuePrefix = currentValuePrefix ? currentValuePrefix + valueSeparator + key : key;
-                helper(currentObj[key], newKeyPrefix, newValuePrefix);
-            } else {
-                const finalKey = currentKeyPrefix ? currentKeyPrefix + keySeparator + key.toLowerCase() : key.toLowerCase();
-                const finalValue = currentValuePrefix ? currentValuePrefix + valueSeparator + key : key;
-                resultMap.set(finalKey, finalValue);
-            }
-        }
-    }
-
-    helper(obj, keyPrefix, keyPrefix);
-    return resultMap;
-}

package/source/dom/util/set-option-from-attribute.mjs

@@ -0,0 +1,83 @@
+/**
+ * Copyright schukai GmbH and contributors 2023. All Rights Reserved.
+ * Node module: @schukai/monster
+ * This file is licensed under the AGPLv3 License.
+ * License text available at https://www.gnu.org/licenses/agpl-3.0.en.html
+ */
+
+import {Pathfinder} from '../../data/pathfinder.mjs';
+import {isFunction} from '../../types/is.mjs';
+import {attributeObserverSymbol} from "../customelement.mjs";
+import {extractKeys} from "./extract-keys.mjs";
+
+export {setOptionFromAttribute};
+
+/**
+ * Set the given options object based on the attributes of the current DOM element.
+ * The function looks for attributes with the prefix 'data-monster-option-', and maps them to
+ * properties in the options object. It replaces the dashes with dots to form the property path.
+ * For example, the attribute 'data-monster-option-url' maps to the 'url' property in the options object.
+ *
+ * With the mapping parameter, the attribute value can be mapped to a different value.
+ * For example, the attribute 'data-monster-option-foo' maps to the 'bar' property in the options object.
+ *
+ * The mapping object would look like this:
+ * {
+ *    'foo': (value) => value + 'bar'
+ *    // the value of the attribute 'data-monster-option-foo' is appended with 'bar'
+ *    // and assigned to the 'bar' property in the options object.
+ *    // e.g. <div data-monster-option-foo="foo"></div>
+ *    'bar.baz': (value) => value + 'bar'
+ *    // the value of the attribute 'data-monster-option-bar-baz' is appended with 'bar'
+ *    // and assigned to the 'bar.baz' property in the options object.  
+ *    // e.g. <div data-monster-option-bar-baz="foo"></div>
+ * }
+ *
+ * @since 3.45.0
+ * @param {HTMLElement} element - The DOM element to be used as the source of the attributes.
+ * @param {Object} name - The attribute object to be used as the source of the attributes.
+ * @param {Object} options - The options object to be initialized.
+ * @param {Object} mapping - A mapping between the attribute value and the property value.
+ * @param {string} prefix - The prefix of the attributes to be considered.
+ * @returns {Object} - The initialized options object.
+ * @this HTMLElement - The context of the DOM element.
+ */
+function setOptionFromAttribute(element, name, options, mapping = {}, prefix = 'data-monster-option-') {
+    if (!(element instanceof HTMLElement)) return options;
+    if (!element.hasAttributes()) return options;
+    
+    const keyMap = extractKeys(options);
+    const finder = new Pathfinder(options);
+
+    // check if the attribute name is a valid option. 
+    // the mapping between the attribute is simple. The dash is replaced by a dot.
+    // e.g. data-monster-url => url
+    const optionName = keyMap.get(name.substring(prefix.length).toLowerCase());
+    if (!finder.exists(optionName)) return;
+
+    if (!element.hasAttribute(name)) {
+        return options;
+    }
+
+    let value = element.getAttribute(name);
+    if (mapping.hasOwnProperty(optionName) && isFunction(mapping[optionName])) {
+        value = mapping[optionName](value);
+    }
+
+    const typeOfOptionValue = typeof finder.getVia(optionName);
+    if (typeOfOptionValue === 'boolean') {
+        value = value === 'true';
+    } else if (typeOfOptionValue === 'number') {
+        value = Number(value);
+    } else if (typeOfOptionValue === 'string') {
+        value = String(value);
+    } else if (typeOfOptionValue === 'object') {
+        value = JSON.parse(value);
+    }
+
+    finder.setVia(optionName, value);
+
+    return options;
+}
+
+

package/source/types/version.mjs

@@ -142,7 +142,7 @@ function getMonsterVersion() {
     }
 
     /** don't touch, replaced by make with package.json version */
-    monsterVersion = new Version("3.44.1");
+    monsterVersion = new Version("3.47.0");
 
     return monsterVersion;
 }

package/test/cases/dom/customcontrol.mjs

@@ -4,9 +4,9 @@ import chai from "chai"
 import {ATTRIBUTE_OPTIONS} from "../../../../application/source/dom/constants.mjs";
 import {getDocument} from "../../../../application/source/dom/util.mjs";
 import {chaiDom} from "../../util/chai-dom.mjs";
+import {cleanupDOMFromTesting, initMutationObserverForTesting} from "../../util/cleanupdom.mjs";
 import {initJSDOM} from "../../util/jsdom.mjs";
 
-
 let expect = chai.expect;
 chai.use(chaiDom);
 
@@ -19,45 +19,46 @@ describe('DOM', function () {
 
     let CustomControl, registerCustomElement, TestComponent, document, jsdomFlag;
 
-    describe('CustomControl()', function () {
-
-        before(function (done) {
-            initJSDOM().then(() => {
+    before(function (done) {
+        initJSDOM().then(() => {
 
-                // jsdom does not support ElementInternals
-                jsdomFlag = navigator.userAgent.includes("jsdom");
+            // jsdom does not support ElementInternals
+            jsdomFlag = navigator.userAgent.includes("jsdom");
 
-                import("../../../../application/source/dom/customelement.mjs").then((m) => {
-                    registerCustomElement = m['registerCustomElement'];
+            import("../../../../application/source/dom/customelement.mjs").then((m) => {
+                registerCustomElement = m['registerCustomElement'];
 
 
-                    import("../../../../application/source/dom/customcontrol.mjs").then((m) => {
+                import("../../../../application/source/dom/customcontrol.mjs").then((m) => {
 
-                        document = getDocument();
+                    document = getDocument();
 
-                        try {
-                            CustomControl = m['CustomControl'];
+                    try {
+                        CustomControl = m['CustomControl'];
 
-                            TestComponent = class extends CustomControl {
-                                static getTag() {
-                                    return "monster-customcontrol"
-                                }
+                        TestComponent = class extends CustomControl {
+                            static getTag() {
+                                return "monster-customcontrol"
                             }
-                            registerCustomElement(TestComponent)
+                        }
+                        registerCustomElement(TestComponent)
 
 
-                            done()
-                        } catch (e) {
-                            done(e);
-                        }
+                        done()
+                    } catch (e) {
+                        done(e);
+                    }
 
 
-                    });
                 });
             });
-        })
+        });
+    })
+
+    describe('CustomControl()', function () {
 
         beforeEach(() => {
+            initMutationObserverForTesting()
             let mocks = document.getElementById('mocks');
             mocks.innerHTML = html1;
         })
@@ -65,6 +66,8 @@ describe('DOM', function () {
         afterEach(() => {
             let mocks = document.getElementById('mocks');
             mocks.innerHTML = "";
+            cleanupDOMFromTesting();
+
         })
 
         describe('create', function () {
@@ -76,28 +79,33 @@ describe('DOM', function () {
 
         describe('connect empty element', function () {
             it('document should contain monster-customcontrol', function () {
-                
+
                 let d = document.createElement('monster-customcontrol');
                 document.getElementById('test1').appendChild(d);
                 expect(document.getElementsByTagName('monster-customcontrol').length).is.equal(1);
-                // no data-monster-objectlink="Symbol(monsterUpdater)" because it has nothing to update
+                // no data-monster-objectlink="Symbol(monsterUpdater)" because it has nothing to update 
                 expect(document.getElementById('test1')).contain.html('<monster-customcontrol></monster-customcontrol>');
             });
         });
 
-        describe('Options change', function () {
-
-            it('delegatesFocus should change from true to false', function () {
-                let element = document.createElement('monster-customcontrol')
-
-                expect(element.getOption('delegatesFocus')).to.be.true;
-                element.setAttribute(ATTRIBUTE_OPTIONS, JSON.stringify({delegatesFocus: false}));
-                expect(element.getOption('delegatesFocus')).to.be.false;
-
-            })
-
-
-        })
+        // describe('Options change', function () {
+        //
+        //     it('delegatesFocus should change from true to false', function (done) {
+        //         let element = document.createElement('monster-customcontrol')
+        //
+        //         expect(element.getOption('delegatesFocus')).to.be.true;
+        //         setTimeout(() => {
+        //             element.setAttribute(ATTRIBUTE_OPTIONS, JSON.stringify({delegatesFocus: false}));
+        //             setTimeout(() => {
+        //                 expect(element.getOption('delegatesFocus')).to.be.false;
+        //                 done();
+        //             }, 10);
+        //         }, 10);
+        //
+        //
+        //     }).timeout(100);
+        //
+        // })
 
         describe('Test ElementInternals', function () {
 
@@ -115,6 +123,7 @@ describe('DOM', function () {
                 expect(d.constructor.formAssociated).to.be.true;
 
             });
+
             it('form', function () {
 
                 let d = document.createElement('monster-customcontrol');
@@ -147,7 +156,6 @@ describe('DOM', function () {
 
             });
 
-
             it('setFormValue', function () {
 
                 let d = document.createElement('monster-customcontrol');
@@ -161,7 +169,6 @@ describe('DOM', function () {
 
             });
 
-
             it('name getter', function () {
 
                 let d = document.createElement('monster-customcontrol');

package/test/cases/dom/customelement-initfromscripthost.mjs

@@ -0,0 +1,143 @@
+'use strict';
+
+import chai from "chai"
+// import {internalSymbol} from "../../../../application/source/constants.mjs";
+// import {ATTRIBUTE_OPTIONS} from "../../../../application/source/dom/constants.mjs";
+import {getDocument} from "../../../../application/source/dom/util.mjs";
+// import {ProxyObserver} from "../../../../application/source/types/proxyobserver.mjs";
+// import {addObjectWithUpdaterToElement} from "../../../../application/source/dom/updater.mjs";
+import {chaiDom} from "../../util/chai-dom.mjs";
+import {initJSDOM} from "../../util/jsdom.mjs";
+
+
+let expect = chai.expect;
+chai.use(chaiDom);
+
+// let html1 = `
+//     <div id="scripthost">
+//     </div>
+//    
+//     <div>
+//     <
+// </div>
+// `;
+
+
+// defined in constants.mjs
+// const updaterSymbolKey = "@schukai/monster/dom/custom-element@@options-updater-link"
+// const updaterSymbolSymbol = Symbol.for(updaterSymbolKey);
+
+
+
+describe('DOM', function () {
+
+    let CustomElement, registerCustomElement, TestComponent, document, TestComponent2,assignUpdaterToElement;
+
+    describe('initFromScriptHost()', function () {
+
+        const randomTagNumber = "monster-test"+Math.floor(Math.random() * 1000000);
+        
+        before(function (done) {
+            initJSDOM().then(() => {
+
+                import("../../../../application/source/dom/customelement.mjs").then((m) => {
+
+                    try {
+                        CustomElement = m['CustomElement'];
+                        registerCustomElement = m['registerCustomElement'];
+
+                        TestComponent2 = class extends CustomElement {
+                            static getTag() {
+                                return randomTagNumber;
+                            }
+
+                            /**
+                             *
+                             * @return {Object}
+                             */
+                            get defaults() {
+
+                                return Object.assign({}, super.defaults, {
+                                    test: 0,
+                                    templates: {
+                                        main: '<h1></h1><article><p>test</p><div id="container"></div></article>'
+                                    },
+                                })
+                            }
+
+                        }
+
+                        registerCustomElement(TestComponent2)
+
+                        document = getDocument();
+                        done()
+                    } catch (e) {
+                        done(e);
+                    }
+
+
+                }).catch((e) => {
+                    done(e);
+                });
+
+            });
+        })
+
+        afterEach(() => {
+            let mocks = document.getElementById('mocks');
+            mocks.innerHTML = "";
+        })
+
+        describe('call callback', function () {
+            it('should not found callback and add error attribute', function () {
+
+                let mocks = document.getElementById('mocks');
+                mocks.innerHTML = `<div id="call-back-host"></div><div id="container"></div>`;
+                
+                let control = document.createElement(randomTagNumber);
+                control.setAttribute('data-monster-script-host', "call-back-host");
+                document.getElementById('container').appendChild(control);
+                expect(control.getOption('test')).is.eql(0);
+                expect(control.hasAttribute('data-monster-error')).is.true;
+
+            });
+            
+            it('should found callback initCustomControlOptionsCallback', function () {
+
+                let mocks = document.getElementById('mocks');
+                mocks.innerHTML = `<div id="call-back-host"></div><div id="container"></div>`;
+                
+                const container = document.getElementById('call-back-host');
+                container.initCustomControlOptionsCallback = function (control) {
+                    control.setOption('test', 1);
+                }
+                
+                let control = document.createElement(randomTagNumber);
+                control.setAttribute('data-monster-script-host', "call-back-host");
+                document.getElementById('container').appendChild(control);
+                expect(control.getOption('test')).is.eql(1);
+                expect(control.hasAttribute('data-monster-error')).is.false;
+
+            });
+            
+            it('should found callback initCustomControlOptionsCallback from self', function () {
+
+                let mocks = document.getElementById('mocks');
+                mocks.innerHTML = `<div id="call-back-host"></div><div id="container"></div>`;
+
+                let control = document.createElement(randomTagNumber);
+                expect(control.getOption('test')).is.eql(0);
+                control.initCustomControlOptionsCallback = function (control) {
+                    control.setOption('test', 2);
+                }
+                
+                control.setAttribute('data-monster-script-host', "call-back-host");
+                document.getElementById('container').appendChild(control);
+                expect(control.getOption('test')).is.eql(2);
+                expect(control.hasAttribute('data-monster-error')).is.false;
+
+            });
+        })
+
+    });
+})

package/test/cases/dom/customelement.mjs

@@ -277,12 +277,12 @@ describe('DOM', function () {
                 expect(element.getOption('delegatesFocus')).to.be.true;
                 expect(Object.is(element[internalSymbol].realSubject, o)).to.be.true;
 
-                element.setAttribute(ATTRIBUTE_OPTIONS, JSON.stringify({delegatesFocus: false}));
-                expect(Object.is(element[internalSymbol].realSubject, o)).to.be.true;
-
-                expect(element.getOption('delegatesFocus')).to.be.false;
-                expect(element[internalSymbol].realSubject.options.delegatesFocus).to.be.false;
-                expect(Object.is(element[internalSymbol].realSubject, o)).to.be.true;
+                // element.setAttribute(ATTRIBUTE_OPTIONS, JSON.stringify({delegatesFocus: false}));
+                // expect(Object.is(element[internalSymbol].realSubject, o)).to.be.true;
+                //
+                // expect(element.getOption('delegatesFocus')).to.be.false;
+                // expect(element[internalSymbol].realSubject.options.delegatesFocus).to.be.false;
+                // expect(Object.is(element[internalSymbol].realSubject, o)).to.be.true;
 
             })
 

package/test/cases/dom/focusmanager.mjs

@@ -55,7 +55,6 @@ describe('FocusManager', function () {
                 });
             }
 
-
         })
 
         it('run ist', function () {

package/test/cases/monster.mjs

@@ -7,7 +7,7 @@ describe('Monster', function () {
         let monsterVersion
 
         /** don´t touch, replaced by make with package.json version */
-        monsterVersion = new Version("3.44.1")
+        monsterVersion = new Version("3.47.0")
 
         let m = getMonsterVersion();
 

package/test/util/cleanupdom.mjs

@@ -16,14 +16,10 @@ function init() {
                     }
                 })
             }
-
         });
     });
-
-
 }
 
-
 /**
  *
  */