diff --git a/application/source/dom/customelement.mjs b/application/source/dom/customelement.mjs
index e57ff7e43ae2eb98edf413f156024db65eb7bc3b..edc1716b38613b98efd7747dc5b8cb6b9b9cd957 100644
--- a/application/source/dom/customelement.mjs
+++ b/application/source/dom/customelement.mjs
@@ -203,9 +203,9 @@ class CustomElement extends HTMLElement {
         this[internalSymbol] = new ProxyObserver({
             options: initOptionsFromAttributes(this, extend({}, this.defaults)),
         });
-        initAttributeChangeMutationObserver.call(this);        
-        initOptionObserver.call(this);
         this[initMethodSymbol]();
+        initOptionObserver.call(this);
+        initAttributeChangeMutationObserver.call(this);
     }
 
     /**
@@ -229,6 +229,28 @@ class CustomElement extends HTMLElement {
         return [ATTRIBUTE_OPTIONS, ATTRIBUTE_DISABLED];
     }
 
+    /**
+     * 
+     * @param attribute
+     * @param callback
+     * @returns {Monster.DOM.CustomElement}
+     */
+    addAttributeObserver(attribute, callback) {
+        validateFunction(callback);
+        this[attributeObserverSymbol][attribute] = callback;
+        return this;
+    }
+
+    /**
+     * 
+     * @param attribute
+     * @returns {Monster.DOM.CustomElement}
+     */
+    removeAttributeObserver(attribute) {
+        delete this[attributeObserverSymbol][attribute];
+        return this;
+    }
+
     /**
      * Derived classes can override and extend this method as follows.
      *
@@ -611,14 +633,6 @@ class CustomElement extends HTMLElement {
 function initAttributeChangeMutationObserver() {
     const self = this;
 
-    if (self[attributeObserverSymbol] === undefined) {
-        self[attributeObserverSymbol] = {};
-    }
-    
-    if(Object.keys(self[attributeObserverSymbol]).length === 0) {
-        return;
-    }
-
     new MutationObserver(function (mutations) {
         for (const mutation of mutations) {
             if (mutation.type === "attributes") {
@@ -628,7 +642,6 @@ function initAttributeChangeMutationObserver() {
     }).observe(self, {
         attributes: true,
         attributeOldValue: true,
-        attributeFilter: Object.keys(self[attributeObserverSymbol]),
     });
 }
 
diff --git a/development/playground/dom-arguments/index.html b/development/playground/dom-arguments/index.html
new file mode 100644
index 0000000000000000000000000000000000000000..538ebea6df6c2ddd777c2c8eaa1359b5f4aa05e1
--- /dev/null
+++ b/development/playground/dom-arguments/index.html
@@ -0,0 +1,29 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Popper Button</title>
+    <script src="main.mjs" type="module"></script>
+</head>
+<body>
+<a href="../">Back</a>
+<main>
+<h1>Updater</h1>
+
+<script type="application/json" data-monster-role="translations">
+    {
+        "theListContainsNoEntries": "translation1",
+        "key2": {
+            "other": "translation2"
+        },
+        "multi": {
+            "two": "translation3"
+        }
+    }
+</script>
+
+<monster-1>Monster1</monster-1>
+</main>
+</body>
+</html>
diff --git a/development/playground/dom-arguments/main.mjs b/development/playground/dom-arguments/main.mjs
new file mode 100644
index 0000000000000000000000000000000000000000..65759c0ef13c60a42cafc9c242eac5c0a1ae0157
--- /dev/null
+++ b/development/playground/dom-arguments/main.mjs
@@ -0,0 +1,70 @@
+import {Fetch} from '../../../application/source/i18n/providers/fetch.mjs';
+import {Updater} from '../../../application/source/dom/updater.mjs';
+import {
+    attributeObserverSymbol,
+    CustomElement,
+    registerCustomElement
+} from '../../../application/source/dom/customelement.mjs';
+import {domReady} from '../../../application/source/dom/ready.mjs';
+import {Embed} from '../../../application/source/i18n/providers/embed.mjs';
+import {ATTRIBUTE_OPTIONS_SELECTOR} from "../../../application/source/monster.mjs";
+
+
+const initMethodSymbol = Symbol.for("@schukai/monster/dom/@@initMethodSymbol");
+
+class Monster1 extends CustomElement {
+
+    constructor() {
+        super();
+     
+    }
+
+    get defaults() {
+        return Object.assign(
+            {},
+            super.defaults,
+            {
+                a: {
+                    b: {
+                        c: "d"
+                    }
+                }
+            });
+    };
+    
+    
+    [initMethodSymbol]() {
+        self = this;
+        console.log("initMethodSymbol");
+        this[attributeObserverSymbol]["data-monster-option-a-b-c"] = (value) => {
+            console.log("data-monster-option-a-b-c", value);
+            self.setOption("a.b.c", value);
+        };
+    }
+
+    /**
+     *
+     * @return {string}
+     */
+    static getTag() {
+        return "monster-1";
+    }
+
+}
+
+
+domReady.then(() => {
+
+   
+    const m1 = document.querySelector("monster-1");
+    console.log(m1);
+    
+    window.m1 = m1;
+
+
+// read from scritp tag with id i18n
+
+
+});
+
+registerCustomElement(Monster1);
diff --git a/development/playground/dom-arguments/translation.json b/development/playground/dom-arguments/translation.json
new file mode 100644
index 0000000000000000000000000000000000000000..88b3d7123ad3385ca8ae033933b77a3bb4efbe42
--- /dev/null
+++ b/development/playground/dom-arguments/translation.json
@@ -0,0 +1,4 @@
+{
+  "key1": "value1",
+  "key2": "value2"
+}
\ No newline at end of file
diff --git a/development/playground/dom-insert/index.html b/development/playground/dom-insert/index.html
index f02d2114608f937fc0b5fd62ca6b8c4db50fd4af..cc1c3f049e4fdab47ac811f85c2cd4b2a0b78059 100644
--- a/development/playground/dom-insert/index.html
+++ b/development/playground/dom-insert/index.html
@@ -1,10 +1,14 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
 <head>
-    <script type="module" src="main.mjs"></script>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Popper Button</title>
+    <script src="main.mjs" type="module"></script>
 </head>
 <body>
-<h1>Updater</h1>
+<a href="../">Back</a>
+<main>
 
 
 <template id="current">
@@ -14,6 +18,6 @@
     <ul data-monster-insert="current path:a.b" >
     </ul>
 </div>
-
+</main>
 </body>
 </html>
diff --git a/development/playground/i18n-control/index.html b/development/playground/i18n-control/index.html
index 5113abe71aa55e92771ec8c7f8407fb15d811f9e..58b4a3b755ec00815c231b44b37d9730c739686b 100644
--- a/development/playground/i18n-control/index.html
+++ b/development/playground/i18n-control/index.html
@@ -1,24 +1,30 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
 <head>
-    <script type="module" src="main.mjs"></script>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Popper Button</title>
+    <script src="main.mjs" type="module"></script>
 </head>
 <body>
-<h1>Updater</h1>
+<a href="../">Back</a>
+<main>
+    <h1>Updater</h1>
 
-<script type="application/json" data-monster-role="translations">
-    {
-        "theListContainsNoEntries": "translation1",
-        "key2": {
-            "other": "translation2"
-        },
-        "multi": {
-            "two": "translation3"
+    <script type="application/json" data-monster-role="translations">
+        {
+            "theListContainsNoEntries": "translation1",
+            "key2": {
+                "other": "translation2"
+            },
+            "multi": {
+                "two": "translation3"
+            }
         }
-    }
-</script>
+    </script>
 
-<monster-1>Monster1</monster-1>
+    <monster-1>Monster1</monster-1>
 
+</main>
 </body>
 </html>
diff --git a/development/playground/i18n-updater/updater.html b/development/playground/i18n-updater/updater.html
index 2d464036b5a092413e2623bb52f76f67aa0bebd3..57c2737a741858cd20c909c84dd6eb25aa728c16 100644
--- a/development/playground/i18n-updater/updater.html
+++ b/development/playground/i18n-updater/updater.html
@@ -1,12 +1,18 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
 <head>
-    <script type="module" src="updater.js"></script>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Popper Button</title>
+    <script src="main.mjs" type="module"></script>
 </head>
 <body>
+<a href="../">Back</a>
+<main>
 <h1>Updater</h1>
 
 <div data-monster-replace="i18n:key1"></div>
 <div data-monster-replace="i18n:key2"></div>
+</main>
 </body>
 </html>