diff --git a/application/source/dom/util/init-options-from-attributes.mjs b/application/source/dom/util/init-options-from-attributes.mjs
index 57fdc0c8f97b53fb1b87c88e8d99967b6fd1fab2..85664dee76277157bf71551935960d35a3ffb7b1 100644
--- a/application/source/dom/util/init-options-from-attributes.mjs
+++ b/application/source/dom/util/init-options-from-attributes.mjs
@@ -7,6 +7,7 @@
 
 import {Pathfinder} from '../../data/pathfinder.mjs';
 import {isFunction} from '../../types/is.mjs';
+import {attributeObserverSymbol} from "../customelement.mjs";
 
 export {initOptionsFromAttributes};
 
@@ -74,6 +75,30 @@ 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);
+                }
+            }
+
+
         }
     })
 
diff --git a/development/test/cases/dom/util/init-options-from-attributes.mjs b/development/test/cases/dom/util/init-options-from-attributes.mjs
index 40af26b2bec21743b05235d87e8d7480912de582..7139f8dcc5e2acb9740285d098f0a699b8d8d579 100644
--- a/development/test/cases/dom/util/init-options-from-attributes.mjs
+++ b/development/test/cases/dom/util/init-options-from-attributes.mjs
@@ -1,18 +1,23 @@
 import {expect} from "chai"
 
-import {initOptionsFromAttributes} from "../../../../..//application/source/dom/util/init-options-from-attributes.mjs";
 import {initJSDOM} from "../../../util/jsdom.mjs";
 
 describe('initOptionsFromAttributes', () => {
     let element;
     let options;
-
-    before(async function () {
-        await initJSDOM();
-    })    
+    let initOptionsFromAttributes;
+
+    before( function (done) {
+         initJSDOM().then(() => {
+            import("../../../../..//application/source/dom/util/init-options-from-attributes.mjs").then((m) => {
+                initOptionsFromAttributes = m['initOptionsFromAttributes'];
+                done();
+            })
+        })
+    });
 
     beforeEach(() => {
-        options = { url: "", key: { subkey: "", caseSensitive: true } };
+        options = {url: "", key: {subkey: "", caseSensitive: true}};
         element = document.createElement('div');
     });
 
@@ -150,13 +155,13 @@ describe('initOptionsFromAttributes', () => {
         const result = initOptionsFromAttributes(element, options, mapping);
 
         expect(result.url).to.equal('');
-    });    
-    
+    });
+
     it('should apply case sensitive mapping', () => {
         element.setAttribute('data-monster-option-key-caseSensitive', 'false');
         const result = initOptionsFromAttributes(element, options);
 
         expect(result.key.caseSensitive).to.equal(false);
-    });    
-    
+    });
+
 });