iobroker.mywebui 1.37.86 → 1.37.88

package/io-package.json

@@ -1,7 +1,7 @@
 {
   "common": {
     "name": "mywebui",
-    "version": "1.37.86",
+    "version": "1.37.88",
     "titleLang": {
       "en": "mywebui",
       "de": "mywebui",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "iobroker.mywebui",
-  "version": "1.37.86",
+  "version": "1.37.88",
   "description": "ioBroker mywebui - Custom edited mywebui by gokturk413",
   "type": "module",
   "main": "dist/backend/main.js",

package/www/dist/frontend/config/IobrokerWebuiScreenEditor.js

@@ -674,25 +674,54 @@ export class IobrokerWebuiScreenEditor extends BaseCustomWebComponentConstructor
         const shadowRoot = rootEl?.shadowRoot;
         if (!rootEl || !shadowRoot) return;
         try {
-            // Facade mimics the ScreenViewer instance API that control scripts expect.
-            // Scripts call _getDomElement(), _assignEvent(), addEventListener(), etc.
-            const facade = {
+            // Proxy wraps rootEl so ALL native HTMLElement methods (querySelector, closest, etc.) work.
+            // Custom WebUI API and attachInternals stub are injected via overrides.
+            // attachInternals() is intercepted because the designer rootEl is a plain HTMLDivElement
+            // (not a custom element), so the native call would throw NotSupportedError.
+            let _internalsStub = null;
+            const overrides = {
                 shadowRoot,
                 _getDomElement(id) {
                     return shadowRoot.getElementById(id) ?? shadowRoot.querySelector(`[name="${id}"]`);
                 },
                 _assignEvent(id, evtName, handler) {
-                    const el = this._getDomElement(id);
+                    const el = overrides._getDomElement(id);
                     if (el) el.addEventListener(evtName, handler);
                 },
-                addEventListener: (type, handler, opts) => rootEl.addEventListener(type, handler, opts),
-                removeEventListener: (type, handler, opts) => rootEl.removeEventListener(type, handler, opts),
-                dispatchEvent: (evt) => rootEl.dispatchEvent(evt),
-                getAttribute: (name) => rootEl.getAttribute(name),
-                setAttribute: (name, val) => rootEl.setAttribute(name, val),
-                style: rootEl.style,
-                dataset: rootEl.dataset,
+                attachInternals() {
+                    if (!_internalsStub) {
+                        _internalsStub = {
+                            setFormValue() {},
+                            setValidity() {},
+                            checkValidity() { return true; },
+                            reportValidity() { return true; },
+                            form: null,
+                            validity: { valid: true, valueMissing: false, typeMismatch: false, patternMismatch: false, tooLong: false, tooShort: false, rangeUnderflow: false, rangeOverflow: false, stepMismatch: false, badInput: false, customError: false },
+                            validationMessage: '',
+                            willValidate: false,
+                            labels: [],
+                            states: { add() {}, delete() {}, has() { return false; }, clear() {}, forEach() {} },
+                            role: null,
+                        };
+                    }
+                    return _internalsStub;
+                },
             };
+            const facade = new Proxy(rootEl, {
+                get(target, prop, receiver) {
+                    if (prop in overrides) {
+                        const v = overrides[prop];
+                        return typeof v === 'function' ? v.bind(overrides) : v;
+                    }
+                    const v = target[prop];
+                    return typeof v === 'function' ? v.bind(target) : v;
+                },
+                set(target, prop, value) {
+                    if (prop in overrides) { overrides[prop] = value; return true; }
+                    target[prop] = value;
+                    return true;
+                },
+            });
             this._designerFacade = facade;
             // Use scriptSystem.assignAllScripts — handles @event attrs, init(), applyBindings, etc.
             let scriptObj = await window.appShell.scriptSystem.assignAllScripts(