@dooboostore/simple-web-component 1.0.5 → 1.0.6

package/dist/umd-bundle/dooboostore-simple-web-component.umd.js

@@ -1119,18 +1119,23 @@ var dooboostoreSimpleWebComponent = (() => {
   var bundle_entry_exports = {};
   __export(bundle_entry_exports, {
     ADD_EVENT_LISTENER_METADATA_KEY: () => ADD_EVENT_LISTENER_METADATA_KEY,
-    ATTRIBUTE_CHANGED_METADATA_KEY: () => ATTRIBUTE_CHANGED_METADATA_KEY,
     ATTRIBUTE_CHANGED_WILDCARD: () => ATTRIBUTE_CHANGED_WILDCARD,
+    ATTRIBUTE_METADATA_KEY: () => ATTRIBUTE_METADATA_KEY,
     ELEMENT_CONFIG_KEY: () => ELEMENT_CONFIG_KEY,
+    EMIT_CUSTOM_EVENT_METADATA_KEY: () => EMIT_CUSTOM_EVENT_METADATA_KEY,
     INNER_HTML_METADATA_KEY: () => INNER_HTML_METADATA_KEY,
+    ON_ADD_EVENT_LISTENER_METADATA_KEY: () => ON_ADD_EVENT_LISTENER_METADATA_KEY,
     ON_AFTER_ADOPTED_METADATA_KEY: () => ON_AFTER_ADOPTED_METADATA_KEY,
     ON_AFTER_CONNECTED_METADATA_KEY: () => ON_AFTER_CONNECTED_METADATA_KEY,
     ON_AFTER_DISCONNECTED_METADATA_KEY: () => ON_AFTER_DISCONNECTED_METADATA_KEY,
+    ON_ATTRIBUTE_CHANGED_METADATA_KEY: () => ON_ATTRIBUTE_CHANGED_METADATA_KEY,
     ON_BEFORE_ADOPTED_METADATA_KEY: () => ON_BEFORE_ADOPTED_METADATA_KEY,
     ON_BEFORE_CONNECTED_METADATA_KEY: () => ON_BEFORE_CONNECTED_METADATA_KEY,
     ON_BEFORE_DISCONNECTED_METADATA_KEY: () => ON_BEFORE_DISCONNECTED_METADATA_KEY,
     QUERY_ALL_METADATA_KEY: () => QUERY_ALL_METADATA_KEY,
     QUERY_METADATA_KEY: () => QUERY_METADATA_KEY,
+    STATE_CHANGE_EVENT: () => STATE_CHANGE_EVENT,
+    STATE_METADATA_KEY: () => STATE_METADATA_KEY,
     SwcChoose: () => SwcChoose,
     SwcChooseAnchor: () => SwcChooseAnchor,
     SwcChooseArea: () => SwcChooseArea,
@@ -1532,27 +1537,33 @@ var dooboostoreSimpleWebComponent = (() => {
     SwcWhenUl: () => SwcWhenUl,
     SwcWhenVideo: () => SwcWhenVideo,
     addEventListener: () => addEventListener,
-    attributeChanged: () => attributeChanged,
+    attribute: () => attribute,
     elementDefine: () => elementDefine,
+    emitCustomEvent: () => emitCustomEvent,
     getAddEventListenerMetadata: () => getAddEventListenerMetadata,
-    getAttributeChangedMap: () => getAttributeChangedMap,
+    getAttributeMetadataList: () => getAttributeMetadataList,
     getElementConfig: () => getElementConfig,
+    getEmitCustomEventMetadataList: () => getEmitCustomEventMetadataList,
     getInnerHtmlMetadataList: () => getInnerHtmlMetadataList,
     getLifecycleMetadata: () => getLifecycleMetadata,
     getQueryAllMetadata: () => getQueryAllMetadata,
     getQueryMetadata: () => getQueryMetadata,
+    getStateMetadataList: () => getStateMetadataList,
     innerHtml: () => innerHtml,
+    onAddEventListener: () => onAddEventListener,
     onAdopted: () => onAdopted,
     onAfterAdopted: () => onAfterAdopted,
     onAfterConnected: () => onAfterConnected,
     onAfterDisconnected: () => onAfterDisconnected,
+    onAttributeChanged: () => onAttributeChanged,
     onBeforeAdopted: () => onBeforeAdopted,
     onBeforeConnected: () => onBeforeConnected,
     onBeforeDisconnected: () => onBeforeDisconnected,
     onConnected: () => onConnected,
     onDisconnected: () => onDisconnected,
     query: () => query,
-    queryAll: () => queryAll
+    queryAll: () => queryAll,
+    state: () => state
   });
   var import_reflect_metadata2 = __toESM(require_Reflect(), 1);
 
@@ -1611,43 +1622,6 @@ var dooboostoreSimpleWebComponent = (() => {
     };
   })(ReflectUtils || (ReflectUtils = {}));
 
-  // src/decorators/attributeChanged.ts
-  var ATTRIBUTE_CHANGED_METADATA_KEY = Symbol("simple-web-component:attribute-changed");
-  var ATTRIBUTE_CHANGED_WILDCARD = "*";
-  function attributeChanged(arg1, arg2, arg3) {
-    const decorator = (attributeName, target, propertyKey) => {
-      const constructor = target.constructor;
-      let meta = ReflectUtils.getMetadata(ATTRIBUTE_CHANGED_METADATA_KEY, constructor);
-      if (!meta) {
-        meta = /* @__PURE__ */ new Map();
-        ReflectUtils.defineMetadata(ATTRIBUTE_CHANGED_METADATA_KEY, meta, constructor);
-      }
-      let methods = meta.get(attributeName);
-      if (!methods) {
-        methods = [];
-        meta.set(attributeName, methods);
-      }
-      if (!methods.includes(propertyKey)) {
-        methods.push(propertyKey);
-      }
-    };
-    if (typeof arg1 === "string") {
-      return (target, propertyKey) => {
-        decorator(arg1, target, propertyKey);
-      };
-    } else if (Array.isArray(arg1)) {
-      return (target, propertyKey) => {
-        arg1.forEach((name) => decorator(name, target, propertyKey));
-      };
-    } else if (arg1 && arg2) {
-      decorator(ATTRIBUTE_CHANGED_WILDCARD, arg1, arg2);
-    }
-  }
-  var getAttributeChangedMap = (target) => {
-    const constructor = target instanceof Function ? target : target.constructor;
-    return ReflectUtils.getMetadata(ATTRIBUTE_CHANGED_METADATA_KEY, constructor);
-  };
-
   // src/decorators/innerHtml.ts
   var INNER_HTML_METADATA_KEY = Symbol("simple-web-component:inner-html");
   function innerHtml(arg1, arg2, arg3) {
@@ -1732,9 +1706,10 @@ var dooboostoreSimpleWebComponent = (() => {
 
   // src/decorators/addEventListener.ts
   var ADD_EVENT_LISTENER_METADATA_KEY = Symbol("simple-web-component:add-event-listener");
-  var addEventListener = (options) => {
+  function addEventListener(arg1, arg2) {
     return (target, propertyKey, descriptor) => {
       const constructor = target.constructor;
+      const options = typeof arg1 === "string" ? { type: arg1, query: arg2 } : arg1;
       let listeners = ReflectUtils.getMetadata(ADD_EVENT_LISTENER_METADATA_KEY, constructor);
       if (!listeners) {
         listeners = [];
@@ -1742,7 +1717,7 @@ var dooboostoreSimpleWebComponent = (() => {
       }
       listeners.push({ options, propertyKey });
     };
-  };
+  }
   var getAddEventListenerMetadata = (target) => {
     const constructor = target instanceof Function ? target : target.constructor;
     return ReflectUtils.getMetadata(ADD_EVENT_LISTENER_METADATA_KEY, constructor);
@@ -1755,6 +1730,9 @@ var dooboostoreSimpleWebComponent = (() => {
   var ON_AFTER_DISCONNECTED_METADATA_KEY = Symbol("simple-web-component:on-after-disconnected");
   var ON_BEFORE_ADOPTED_METADATA_KEY = Symbol("simple-web-component:on-before-adopted");
   var ON_AFTER_ADOPTED_METADATA_KEY = Symbol("simple-web-component:on-after-adopted");
+  var ON_ADD_EVENT_LISTENER_METADATA_KEY = Symbol("simple-web-component:on-add-event-listener");
+  var ON_ATTRIBUTE_CHANGED_METADATA_KEY = Symbol("simple-web-component:on-attribute-changed");
+  var ATTRIBUTE_CHANGED_WILDCARD = "*";
   function createLifecycleDecorator(metadataKey) {
     return (target, propertyKey) => {
       const constructor = target.constructor;
@@ -1775,13 +1753,258 @@ var dooboostoreSimpleWebComponent = (() => {
   var onBeforeAdopted = createLifecycleDecorator(ON_BEFORE_ADOPTED_METADATA_KEY);
   var onAfterAdopted = createLifecycleDecorator(ON_AFTER_ADOPTED_METADATA_KEY);
   var onAdopted = onAfterAdopted;
+  var onAddEventListener = createLifecycleDecorator(ON_ADD_EVENT_LISTENER_METADATA_KEY);
+  function onAttributeChanged(arg1, arg2, arg3) {
+    const decorator = (attributeName, target, propertyKey) => {
+      const constructor = target.constructor;
+      let meta = ReflectUtils.getMetadata(ON_ATTRIBUTE_CHANGED_METADATA_KEY, constructor);
+      if (!meta) {
+        meta = /* @__PURE__ */ new Map();
+        ReflectUtils.defineMetadata(ON_ATTRIBUTE_CHANGED_METADATA_KEY, meta, constructor);
+      }
+      let methods = meta.get(attributeName);
+      if (!methods) {
+        methods = [];
+        meta.set(attributeName, methods);
+      }
+      if (!methods.includes(propertyKey)) {
+        methods.push(propertyKey);
+      }
+    };
+    if (typeof arg1 === "string") {
+      return (target, propertyKey) => {
+        decorator(arg1, target, propertyKey);
+      };
+    } else if (Array.isArray(arg1)) {
+      return (target, propertyKey) => {
+        arg1.forEach((name) => decorator(name, target, propertyKey));
+      };
+    } else if (arg1 && arg2) {
+      decorator(ATTRIBUTE_CHANGED_WILDCARD, arg1, arg2);
+    }
+  }
   var getLifecycleMetadata = (target, metadataKey) => {
     const constructor = target instanceof Function ? target : target.constructor;
     return ReflectUtils.getMetadata(metadataKey, constructor);
   };
 
+  // src/decorators/attribute.ts
+  var ATTRIBUTE_METADATA_KEY = Symbol("simple-web-component:attribute");
+  function attribute(nameOrOptions) {
+    return (target, propertyKey) => {
+      const constructor = target.constructor;
+      const options = typeof nameOrOptions === "string" ? { name: nameOrOptions } : nameOrOptions || {};
+      if (!options.name) options.name = String(propertyKey);
+      if (!options.type) options.type = String;
+      if (options.disableReflect === void 0) options.disableReflect = false;
+      let list = ReflectUtils.getMetadata(ATTRIBUTE_METADATA_KEY, constructor);
+      if (!list) {
+        list = [];
+        ReflectUtils.defineMetadata(ATTRIBUTE_METADATA_KEY, list, constructor);
+      }
+      list.push({ propertyKey, options });
+      const internalKey = Symbol(String(propertyKey));
+      Object.defineProperty(target, propertyKey, {
+        get() {
+          return this[internalKey];
+        },
+        set(val) {
+          const oldVal = this[internalKey];
+          if (oldVal === val) return;
+          let convertedVal = val;
+          if (options.type === Number) convertedVal = Number(val);
+          else if (options.type === Boolean) convertedVal = Boolean(val);
+          else if (options.type === Object && typeof val === "string") {
+            try {
+              convertedVal = JSON.parse(val);
+            } catch (e) {
+              convertedVal = val;
+            }
+          }
+          this[internalKey] = convertedVal;
+          if (!options.disableReflect && this.setAttribute) {
+            if (convertedVal === null || convertedVal === void 0 || convertedVal === false) {
+              this.removeAttribute(options.name);
+            } else {
+              const attrVal = typeof convertedVal === "object" ? JSON.stringify(convertedVal) : String(convertedVal);
+              if (this.getAttribute(options.name) !== attrVal) {
+                this.setAttribute(options.name, attrVal);
+              }
+            }
+          }
+        },
+        enumerable: true,
+        configurable: true
+      });
+    };
+  }
+  var getAttributeMetadataList = (target) => {
+    const constructor = target instanceof Function ? target : target.constructor;
+    return ReflectUtils.getMetadata(ATTRIBUTE_METADATA_KEY, constructor);
+  };
+
+  // src/decorators/state.ts
+  var STATE_METADATA_KEY = Symbol("simple-web-component:state");
+  function state(arg1, arg2) {
+    const decorator = (options, target, propertyKey) => {
+      const constructor = target.constructor;
+      if (!options.name) options.name = String(propertyKey);
+      let list = ReflectUtils.getMetadata(STATE_METADATA_KEY, constructor);
+      if (!list) {
+        list = [];
+        ReflectUtils.defineMetadata(STATE_METADATA_KEY, list, constructor);
+      }
+      list.push({ propertyKey, options });
+    };
+    if (arg2) {
+      return decorator({}, arg1, arg2);
+    }
+    return (target, propertyKey) => {
+      const options = typeof arg1 === "string" ? { name: arg1 } : arg1 || {};
+      decorator(options, target, propertyKey);
+    };
+  }
+  var getStateMetadataList = (target) => {
+    const constructor = target instanceof Function ? target : target.constructor;
+    return ReflectUtils.getMetadata(STATE_METADATA_KEY, constructor);
+  };
+
+  // src/decorators/emitCustomEvent.ts
+  var EMIT_CUSTOM_EVENT_METADATA_KEY = Symbol("simple-web-component:emit-custom-event");
+  function emitCustomEvent(typeOrOptions) {
+    return (target, propertyKey, descriptor) => {
+      const constructor = target.constructor;
+      const options = typeof typeOrOptions === "string" ? { type: typeOrOptions } : typeOrOptions;
+      if (!options.attributeName) {
+        options.attributeName = `on${options.type}`;
+      }
+      if (options.bubbles === void 0) options.bubbles = true;
+      if (options.composed === void 0) options.composed = true;
+      let list = ReflectUtils.getMetadata(EMIT_CUSTOM_EVENT_METADATA_KEY, constructor);
+      if (!list) {
+        list = [];
+        ReflectUtils.defineMetadata(EMIT_CUSTOM_EVENT_METADATA_KEY, list, constructor);
+      }
+      list.push({ propertyKey, options });
+      const originalMethod = descriptor.value;
+      descriptor.value = function(...args) {
+        const detail = originalMethod.apply(this, args);
+        const event = new CustomEvent(options.type, {
+          detail,
+          bubbles: options.bubbles,
+          composed: options.composed,
+          cancelable: options.cancelable
+        });
+        this.dispatchEvent(event);
+        return detail;
+      };
+    };
+  }
+  var getEmitCustomEventMetadataList = (target) => {
+    const constructor = target instanceof Function ? target : target.constructor;
+    return ReflectUtils.getMetadata(EMIT_CUSTOM_EVENT_METADATA_KEY, constructor);
+  };
+
+  // src/utils/Utils.ts
+  var SwcUtils = class _SwcUtils {
+    static getValueByPath(obj, path, asKey) {
+      if (!obj || !path) return void 0;
+      const parts = path.split(".");
+      let result = obj;
+      let success = true;
+      for (const part of parts) {
+        if (result !== null && typeof result === "object" && part in result) {
+          result = result[part];
+        } else {
+          success = false;
+          break;
+        }
+      }
+      if (success && result !== obj && !(result instanceof HTMLElement)) {
+        return result;
+      }
+      if (path === asKey) return obj;
+      if (path.startsWith(asKey + ".")) {
+        const subParts = parts.slice(1);
+        let subResult = obj;
+        for (const part of subParts) {
+          if (subResult !== null && typeof subResult === "object" && part in subResult) {
+            subResult = subResult[part];
+          } else {
+            return void 0;
+          }
+        }
+        return subResult;
+      }
+      if (obj instanceof HTMLElement && obj.parentElement) {
+      }
+      return void 0;
+    }
+    static applyData(node, data, options) {
+      const { asKey, asIndexKey, index } = options;
+      const context = {};
+      if (index !== void 0) {
+        context[asIndexKey] = index.toString();
+      }
+      const walk = (n) => {
+        if (n.nodeType === Node.TEXT_NODE) {
+          if (!n._original) n._original = n.textContent;
+          let text = n._original;
+          text = text.replace(/{{(.*?)}}/g, (match, path) => {
+            path = path.trim();
+            if (context[path] !== void 0) return context[path];
+            const val = _SwcUtils.getValueByPath(data, path, asKey);
+            return val !== void 0 ? val : match;
+          });
+          if (n.textContent !== text) n.textContent = text;
+        } else if (n.nodeType === Node.ELEMENT_NODE) {
+          const el = n;
+          Array.from(el.attributes).forEach((a) => {
+            if (!a._original) a._original = a.value;
+            let val = a._original;
+            val = val.replace(/{{(.*?)}}/g, (match, path) => {
+              path = path.trim();
+              if (context[path] !== void 0) return context[path];
+              const v = _SwcUtils.getValueByPath(data, path, asKey);
+              return v !== void 0 ? v : match;
+            });
+            if (a.value !== val) a.value = val;
+          });
+          el.childNodes.forEach(walk);
+        }
+      };
+      walk(node);
+    }
+    static createReactiveProxy(target, onChange, onIndexChange) {
+      const makeRecursiveProxy = (obj) => {
+        if (typeof obj !== "object" || obj === null || obj instanceof Node) return obj;
+        return new Proxy(obj, {
+          set: (t, prop, val) => {
+            const oldVal = t[prop];
+            if (oldVal === val) return true;
+            t[prop] = makeRecursiveProxy(val);
+            const isIndex = !isNaN(Number(prop)) && Array.isArray(t);
+            if (isIndex && onIndexChange) {
+              onIndexChange(Number(prop), val);
+            } else {
+              onChange();
+            }
+            return true;
+          },
+          deleteProperty: (t, prop) => {
+            delete t[prop];
+            onChange();
+            return true;
+          }
+        });
+      };
+      return makeRecursiveProxy(target);
+    }
+  };
+
   // src/decorators/elementDefine.ts
   var ELEMENT_CONFIG_KEY = Symbol("simple-web-component:element-config");
+  var STATE_CHANGE_EVENT = "swc:state-change";
   var BUILT_IN_TAG_MAP = /* @__PURE__ */ new Map();
   var registerTag = (className, tagName) => {
     if (typeof globalThis !== "undefined" && globalThis[className]) {
@@ -1857,17 +2080,49 @@ var dooboostoreSimpleWebComponent = (() => {
         proto = Object.getPrototypeOf(proto);
       }
     }
-    const attributeChangedMap = getAttributeChangedMap(constructor);
-    const observedFromDecorators = attributeChangedMap ? Array.from(attributeChangedMap.keys()).filter((it) => it !== ATTRIBUTE_CHANGED_WILDCARD) : [];
-    const mergedObservedAttributes = [.../* @__PURE__ */ new Set([...config.observedAttributes ?? [], ...observedFromDecorators])];
+    const attributePropsList = getAttributeMetadataList(constructor);
+    const emitCustomEventList = getEmitCustomEventMetadataList(constructor);
+    const stateList = getStateMetadataList(constructor);
+    const observedFromProps = attributePropsList ? attributePropsList.map((it) => it.options.name) : [];
+    const observedFromEmits = emitCustomEventList ? emitCustomEventList.map((it) => it.options.attributeName) : [];
+    const mergedObservedAttributes = [.../* @__PURE__ */ new Set([...config.observedAttributes ?? [], ...observedFromProps, ...observedFromEmits])];
     const NewClass = class extends constructor {
       constructor(...args) {
         super(...args);
+        this._swcId = Math.random().toString(36).substring(2, 11);
         this._observer = null;
         this._boundElements = /* @__PURE__ */ new WeakMap();
+        this._activeListeners = [];
+        this._emitHandlers = /* @__PURE__ */ new Map();
+        this._stateBindings = /* @__PURE__ */ new Map();
+        this._internalStates = /* @__PURE__ */ new Map();
+        this._externalSources = /* @__PURE__ */ new Map();
+        if (stateList) {
+          stateList.forEach((meta) => {
+            const key = meta.propertyKey;
+            const stateName = meta.options.name;
+            const initialVal = this[key];
+            this._internalStates.set(
+              key,
+              SwcUtils.createReactiveProxy(initialVal, () => this._updateState(stateName))
+            );
+            Object.defineProperty(this, key, {
+              get: () => this._internalStates.get(key),
+              set: (newVal) => {
+                if (this._internalStates.get(key) === newVal) return;
+                this._internalStates.set(
+                  key,
+                  SwcUtils.createReactiveProxy(newVal, () => this._updateState(stateName))
+                );
+                this._updateState(stateName);
+              },
+              enumerable: true,
+              configurable: true
+            });
+          });
+        }
         const innerHtmlList = getInnerHtmlMetadataList(this);
-        const useShadow = innerHtmlList?.some((it) => it.options.useShadow === true);
-        if (useShadow === true && !this.shadowRoot) {
+        if (innerHtmlList?.some((it) => it.options.useShadow === true) && !this.shadowRoot) {
           this.attachShadow({ mode: "open" });
         }
       }
@@ -1875,6 +2130,7 @@ var dooboostoreSimpleWebComponent = (() => {
         return mergedObservedAttributes;
       }
       _syncDecorators() {
+        this._buildStateMap();
         const queryMetadata = getQueryMetadata(this);
         if (queryMetadata) {
           queryMetadata.filter((it) => it.isMethod).forEach((it) => {
@@ -1904,9 +2160,9 @@ var dooboostoreSimpleWebComponent = (() => {
         const eventListeners = getAddEventListenerMetadata(this);
         if (eventListeners) {
           eventListeners.forEach((it) => {
-            const { selector, eventName, useShadow, ...options } = it.options;
+            const { query: query2, type, useShadow, ...options } = it.options;
             const root = useShadow !== false && this.shadowRoot ? this.shadowRoot : this;
-            const targetElements = selector ? root.querySelectorAll(selector) : [this];
+            const targetElements = query2 ? root.querySelectorAll(query2) : [this];
             targetElements.forEach((targetElement) => {
               if (targetElement) {
                 let bound = this._boundElements.get(targetElement);
@@ -1914,127 +2170,220 @@ var dooboostoreSimpleWebComponent = (() => {
                   bound = /* @__PURE__ */ new Set();
                   this._boundElements.set(targetElement, bound);
                 }
-                const eventKey = `event:${String(it.propertyKey)}:${eventName}`;
+                const eventKey = `event:${String(it.propertyKey)}:${type}`;
                 if (!bound.has(eventKey)) {
-                  targetElement.addEventListener(
-                    eventName,
-                    (event) => {
-                      this[it.propertyKey](event);
-                    },
-                    options
-                  );
+                  const handler = (event) => {
+                    if (it.options.stopImmediatePropagation) event.stopImmediatePropagation();
+                    if (it.options.stopPropagation) event.stopPropagation();
+                    if (it.options.preventDefault) event.preventDefault();
+                    this[it.propertyKey](event, targetElement);
+                  };
+                  targetElement.addEventListener(type, handler, options);
                   bound.add(eventKey);
+                  if (config.autoRemoveEventListeners) this._activeListeners.push({ el: targetElement, type, handler, options });
+                  const addEventMethods = getLifecycleMetadata(this, ON_ADD_EVENT_LISTENER_METADATA_KEY);
+                  addEventMethods?.forEach((m) => {
+                    if (typeof this[m] === "function") this[m](targetElement, type, handler);
+                  });
                 }
               }
             });
           });
         }
       }
+      _buildStateMap() {
+        this._stateBindings.clear();
+        this._externalSources.clear();
+        const scan = (root) => {
+          const walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT);
+          let node = null;
+          while (node = walker.nextNode()) {
+            if (node.nodeType === Node.TEXT_NODE) this._parseAndBind(node, "text");
+            else if (node.nodeType === Node.ELEMENT_NODE) {
+              const el = node;
+              const alias = el.getAttribute("as");
+              if (alias) {
+                this._externalSources.set(alias, el);
+                el.addEventListener(STATE_CHANGE_EVENT, () => this._updateState(alias));
+              }
+              Array.from(el.attributes).forEach((attr) => this._parseAndBind(attr, "attribute", el));
+            }
+          }
+        };
+        if (this.shadowRoot) scan(this.shadowRoot);
+        scan(this);
+      }
+      _parseAndBind(node, type, owner) {
+        const content = node.textContent || "";
+        const matches = Array.from(content.matchAll(/{{(.*?)}}/g));
+        if (matches.length === 0) return;
+        matches.forEach((match) => {
+          const fullPath = match[1].trim();
+          const rootName = fullPath.split(".")[0];
+          const isState = stateList?.some((s) => s.options.name === rootName);
+          const isLogicKey = this._asKey === rootName || this._asIndexKey === rootName;
+          const isExternal = this._externalSources.has(rootName);
+          const isSelfAlias = this.getAttribute("as") === rootName;
+          if (!isState && !isLogicKey && !isExternal && !isSelfAlias) return;
+          if (!this._stateBindings.has(rootName)) this._stateBindings.set(rootName, []);
+          const tplKey = `__swc_original_${this._swcId}`;
+          if (!node[tplKey]) node[tplKey] = content;
+          this._stateBindings.get(rootName).push({ node, type, owner, path: fullPath });
+          this._updateState(rootName);
+        });
+      }
+      _updateState(stateName) {
+        if (!this._stateBindings) return;
+        this._executeBindingUpdate(stateName);
+        const selfAlias = this.getAttribute("as");
+        if (selfAlias && selfAlias !== stateName) this._executeBindingUpdate(selfAlias);
+        this.dispatchEvent(new CustomEvent(STATE_CHANGE_EVENT, { bubbles: true, composed: true }));
+      }
+      _executeBindingUpdate(stateName) {
+        const bindings = this._stateBindings.get(stateName);
+        if (!bindings) return;
+        const tplKey = `__swc_original_${this._swcId}`;
+        bindings.forEach((bin) => {
+          let text = bin.node[tplKey];
+          const matches = Array.from(text.matchAll(/{{(.*?)}}/g));
+          for (const match of matches) {
+            const path = match[1].trim();
+            const root = path.split(".")[0];
+            let val = void 0;
+            let current = this;
+            while (current) {
+              const currentNewClass = current;
+              if (current.getAttribute("as") === root) {
+                val = SwcUtils.getValueByPath(current, path.split(".").slice(1).join(".") || "value", "value");
+                if (val !== void 0) break;
+              }
+              const externalSource = currentNewClass._externalSources?.get(root);
+              if (externalSource) {
+                val = SwcUtils.getValueByPath(externalSource, path.split(".").slice(1).join(".") || "value", "value");
+                if (val !== void 0) break;
+              }
+              const cStates = getStateMetadataList(current.constructor);
+              const cAttrs = getAttributeMetadataList(current.constructor);
+              const sMeta = cStates?.find((s) => s.options.name === root);
+              const aMeta = cAttrs?.find((a) => a.options.name === root);
+              if (sMeta || aMeta) {
+                let aPath = path;
+                if (sMeta && sMeta.options.name !== String(sMeta.propertyKey)) aPath = path.replace(sMeta.options.name, String(sMeta.propertyKey));
+                else if (aMeta && aMeta.options.name !== String(aMeta.propertyKey)) aPath = path.replace(aMeta.options.name, String(aMeta.propertyKey));
+                val = SwcUtils.getValueByPath(current, aPath, root);
+                if (val !== void 0) break;
+              }
+              current = current.parentElement || current.getRootNode().host;
+            }
+            if (val !== void 0) {
+              const strVal = val === null || val === void 0 ? "" : typeof val === "object" ? "[Object]" : String(val);
+              text = text.replace(match[0], strVal);
+              if (bin.type === "attribute" && bin.owner) {
+                if (val === null || val === void 0) bin.owner.removeAttribute(bin.attrName);
+                else bin.owner.setAttribute(bin.attrName, text);
+              }
+            }
+          }
+          if (bin.type === "text") bin.node.textContent = text;
+        });
+      }
       disconnectedCallback() {
-        const beforeMethods = getLifecycleMetadata(this, ON_BEFORE_DISCONNECTED_METADATA_KEY);
-        beforeMethods?.forEach((m) => {
+        const bMethods = getLifecycleMetadata(this, ON_BEFORE_DISCONNECTED_METADATA_KEY);
+        bMethods?.forEach((m) => {
           if (typeof this[m] === "function") this[m]();
         });
-        if (this._observer) {
-          this._observer.disconnect();
-        }
-        if (super.disconnectedCallback) {
-          super.disconnectedCallback();
+        if (this._observer) this._observer.disconnect();
+        if (config.autoRemoveEventListeners) {
+          this._activeListeners.forEach(({ el, type, handler, options }) => el.removeEventListener(type, handler, options));
+          this._activeListeners = [];
         }
-        const afterMethods = getLifecycleMetadata(this, ON_AFTER_DISCONNECTED_METADATA_KEY);
-        afterMethods?.forEach((m) => {
+        if (super.disconnectedCallback) super.disconnectedCallback();
+        const aMethods = getLifecycleMetadata(this, ON_AFTER_DISCONNECTED_METADATA_KEY);
+        aMethods?.forEach((m) => {
           if (typeof this[m] === "function") this[m]();
         });
       }
       adoptedCallback() {
-        const beforeMethods = getLifecycleMetadata(this, ON_BEFORE_ADOPTED_METADATA_KEY);
-        beforeMethods?.forEach((m) => {
+        const bMethods = getLifecycleMetadata(this, ON_BEFORE_ADOPTED_METADATA_KEY);
+        bMethods?.forEach((m) => {
           if (typeof this[m] === "function") this[m]();
         });
-        if (super.adoptedCallback) {
-          super.adoptedCallback();
-        }
-        const afterMethods = getLifecycleMetadata(this, ON_AFTER_ADOPTED_METADATA_KEY);
-        afterMethods?.forEach((m) => {
+        if (super.adoptedCallback) super.adoptedCallback();
+        const aMethods = getLifecycleMetadata(this, ON_AFTER_ADOPTED_METADATA_KEY);
+        aMethods?.forEach((m) => {
           if (typeof this[m] === "function") this[m]();
         });
       }
       async connectedCallback() {
-        const beforeMethods = getLifecycleMetadata(this, ON_BEFORE_CONNECTED_METADATA_KEY);
-        beforeMethods?.forEach((m) => {
+        const bMethods = getLifecycleMetadata(this, ON_BEFORE_CONNECTED_METADATA_KEY);
+        bMethods?.forEach((m) => {
           if (typeof this[m] === "function") this[m]();
         });
-        if (typeof this.initCore === "function") {
-          this.initCore();
-        }
-        const innerHtmlList = getInnerHtmlMetadataList(this);
-        let shadowContent = "";
-        let lightContent = "";
-        if (innerHtmlList) {
-          for (const meta of innerHtmlList) {
+        if (typeof this.initCore === "function") this.initCore();
+        const iHtmlList = getInnerHtmlMetadataList(this);
+        let sContent = "";
+        let lContent = "";
+        if (iHtmlList) {
+          for (const meta of iHtmlList) {
             const result = await this[meta.propertyKey]();
             if (result !== void 0) {
-              if (meta.options.useShadow === true) {
-                shadowContent += result;
-              } else {
-                lightContent += result;
-              }
+              if (meta.options.useShadow === true) sContent += result;
+              else lContent += result;
             }
           }
         }
-        if (this.shadowRoot) {
-          this.shadowRoot.innerHTML = shadowContent;
-        }
-        if (lightContent) {
-          this.innerHTML = lightContent;
-        }
+        if (this.shadowRoot) this.shadowRoot.innerHTML = sContent;
+        if (lContent) this.innerHTML = lContent;
         this._syncDecorators();
-        this._observer = new MutationObserver(() => {
-          this._syncDecorators();
-        });
-        const target = this.shadowRoot || this;
-        this._observer.observe(target, { childList: true, subtree: true });
-        if (super.connectedCallback) {
-          await super.connectedCallback();
-        }
-        const afterMethods = getLifecycleMetadata(this, ON_AFTER_CONNECTED_METADATA_KEY);
-        afterMethods?.forEach((m) => {
+        this._observer = new MutationObserver(() => this._syncDecorators());
+        this._observer.observe(this.shadowRoot || this, { childList: true, subtree: true });
+        if (super.connectedCallback) await super.connectedCallback();
+        const aMethods = getLifecycleMetadata(this, ON_AFTER_CONNECTED_METADATA_KEY);
+        aMethods?.forEach((m) => {
           if (typeof this[m] === "function") this[m]();
         });
       }
-      // 4. Handle attribute changes and route to decorated methods
       attributeChangedCallback(name, oldValue, newValue) {
-        if (super.attributeChangedCallback) {
-          super.attributeChangedCallback(name, oldValue, newValue);
-        }
-        const methodKeys = attributeChangedMap?.get(name);
-        if (methodKeys && Array.isArray(methodKeys)) {
-          methodKeys.forEach((key) => {
-            if (typeof this[key] === "function") {
-              this[key](newValue, oldValue, name);
+        if (super.attributeChangedCallback) super.attributeChangedCallback(name, oldValue, newValue);
+        if (attributePropsList) {
+          attributePropsList.forEach((meta) => {
+            if (meta.options.name === name) {
+              if (String(this[meta.propertyKey]) !== String(newValue)) this[meta.propertyKey] = newValue;
             }
           });
         }
-        const wildcardMethodKeys = attributeChangedMap?.get(ATTRIBUTE_CHANGED_WILDCARD);
-        if (wildcardMethodKeys && Array.isArray(wildcardMethodKeys)) {
-          wildcardMethodKeys.forEach((key) => {
-            if (typeof this[key] === "function") {
-              this[key](newValue, oldValue, name);
-            }
+        if (typeof this._updateState === "function") this._updateState(name);
+        const aMethodsMap = getLifecycleMetadata(constructor, ON_ATTRIBUTE_CHANGED_METADATA_KEY);
+        const mKeys = aMethodsMap?.get(name);
+        if (mKeys && Array.isArray(mKeys))
+          mKeys.forEach((key) => {
+            if (typeof this[key] === "function") this[key](newValue, oldValue, name);
           });
+        if (emitCustomEventList) {
+          const eMeta = emitCustomEventList.find((it) => it.options.attributeName === name);
+          if (eMeta) {
+            const eType = eMeta.options.type;
+            const oHandler = this._emitHandlers.get(eType);
+            if (oHandler) this.removeEventListener(eType, oHandler);
+            if (newValue) {
+              const nHandler = (e) => {
+                new Function("event", "$data", newValue).call(this, e, e.detail);
+              };
+              this.addEventListener(eType, nHandler);
+              this._emitHandlers.set(eType, nHandler);
+            }
+          }
         }
+        const wMethodsKeys = aMethodsMap?.get(ATTRIBUTE_CHANGED_WILDCARD);
+        if (wMethodsKeys && Array.isArray(wMethodsKeys))
+          wMethodsKeys.forEach((key) => {
+            if (typeof this[key] === "function") this[key](newValue, oldValue, name);
+          });
       }
     };
     const registry = config.customElementRegistry || (typeof customElements !== "undefined" ? customElements : void 0);
     if (registry && !registry.get(config.name)) {
-      const options = extendsTagName ? { extends: extendsTagName } : void 0;
-      if (extendsTagName && typeof document !== "undefined") {
-        const isSupported = document.createElement(extendsTagName, { is: "any" }).outerHTML.indexOf("is=") !== -1;
-        if (!isSupported) {
-          console.warn(`[SWC] Browser does not support 'is' attribute (Customized Built-in Elements). If you are on Safari, please include '@ungap/custom-elements' polyfill.`);
-        }
-      }
-      registry.define(config.name, NewClass, options);
+      registry.define(config.name, NewClass, config.extends ? { extends: config.extends } : void 0);
     }
     ReflectUtils.defineMetadata(ELEMENT_CONFIG_KEY, config, NewClass);
     return NewClass;
@@ -2044,71 +2393,6 @@ var dooboostoreSimpleWebComponent = (() => {
     return ReflectUtils.getMetadata(ELEMENT_CONFIG_KEY, constructor);
   };
 
-  // src/utils/Utils.ts
-  var SwcUtils = class _SwcUtils {
-    static getValueByPath(obj, path, asKey) {
-      if (path === asKey) return obj;
-      if (path.startsWith(`${asKey}.`)) {
-        return path.split(".").slice(1).reduce((acc, part) => acc && acc[part], obj);
-      }
-      return void 0;
-    }
-    static applyData(node, data, options) {
-      const { asKey, asIndexKey, index } = options;
-      const context = {};
-      if (index !== void 0) {
-        context[asIndexKey] = index.toString();
-      }
-      const walk = (n) => {
-        if (n.nodeType === Node.TEXT_NODE) {
-          if (!n._original) n._original = n.textContent;
-          let text = n._original;
-          text = text.replace(/{{(.*?)}}/g, (match, path) => {
-            path = path.trim();
-            if (context[path] !== void 0) return context[path];
-            const val = _SwcUtils.getValueByPath(data, path, asKey);
-            return val !== void 0 ? val : match;
-          });
-          if (n.textContent !== text) n.textContent = text;
-        } else if (n.nodeType === Node.ELEMENT_NODE) {
-          const el = n;
-          Array.from(el.attributes).forEach((a) => {
-            if (!a._original) a._original = a.value;
-            let val = a._original;
-            val = val.replace(/{{(.*?)}}/g, (match, path) => {
-              path = path.trim();
-              if (context[path] !== void 0) return context[path];
-              const v = _SwcUtils.getValueByPath(data, path, asKey);
-              return v !== void 0 ? v : match;
-            });
-            if (a.value !== val) a.value = val;
-          });
-          el.childNodes.forEach(walk);
-        }
-      };
-      walk(node);
-    }
-    static createReactiveProxy(target, onChange, onIndexChange) {
-      return new Proxy(target, {
-        set: (t, prop, val) => {
-          const isIndex = !isNaN(Number(prop));
-          t[prop] = val;
-          if (isIndex && onIndexChange) {
-            onIndexChange(Number(prop), val);
-          } else {
-            onChange();
-          }
-          return true;
-        },
-        deleteProperty: (t, prop) => {
-          delete t[prop];
-          onChange();
-          return true;
-        }
-      });
-    }
-  };
-
   // src/elements/SwcHTMLElementBase.ts
   var SwcHTMLElementBase = class extends HTMLElement {
     constructor() {
@@ -2728,9 +3012,9 @@ var dooboostoreSimpleWebComponent = (() => {
       if (isTruthy && this._masterTplNodes.length > 0) {
         this._masterTplNodes.forEach((tplNode) => {
           const clone = tplNode.cloneNode(true);
-          this.appendChild(clone);
           if (clone.style)
             clone.style.display = "contents";
+          this.appendChild(clone);
           this.applyData(clone, this._swcValue);
         });
       }
@@ -3110,9 +3394,9 @@ var dooboostoreSimpleWebComponent = (() => {
       if (isTruthy && this._masterTplNodes.length > 0) {
         this._masterTplNodes.forEach((tplNode) => {
           const clone = tplNode.cloneNode(true);
-          this.appendChild(clone);
           if (clone.style)
             clone.style.display = "contents";
+          this.appendChild(clone);
           this.applyData(clone, this._swcValue);
         });
       }
@@ -3492,9 +3776,9 @@ var dooboostoreSimpleWebComponent = (() => {
       if (isTruthy && this._masterTplNodes.length > 0) {
         this._masterTplNodes.forEach((tplNode) => {
           const clone = tplNode.cloneNode(true);
-          this.appendChild(clone);
           if (clone.style)
             clone.style.display = "contents";
+          this.appendChild(clone);
           this.applyData(clone, this._swcValue);
         });
       }
@@ -3874,9 +4158,9 @@ var dooboostoreSimpleWebComponent = (() => {
       if (isTruthy && this._masterTplNodes.length > 0) {
         this._masterTplNodes.forEach((tplNode) => {
           const clone = tplNode.cloneNode(true);
-          this.appendChild(clone);
           if (clone.style)
             clone.style.display = "contents";
+          this.appendChild(clone);
           this.applyData(clone, this._swcValue);
         });
       }
@@ -4256,9 +4540,9 @@ var dooboostoreSimpleWebComponent = (() => {
       if (isTruthy && this._masterTplNodes.length > 0) {
         this._masterTplNodes.forEach((tplNode) => {
           const clone = tplNode.cloneNode(true);
-          this.appendChild(clone);
           if (clone.style)
             clone.style.display = "contents";
+          this.appendChild(clone);
           this.applyData(clone, this._swcValue);
         });
       }
@@ -4638,9 +4922,9 @@ var dooboostoreSimpleWebComponent = (() => {
       if (isTruthy && this._masterTplNodes.length > 0) {
         this._masterTplNodes.forEach((tplNode) => {
           const clone = tplNode.cloneNode(true);
-          this.appendChild(clone);
           if (clone.style)
             clone.style.display = "contents";
+          this.appendChild(clone);
           this.applyData(clone, this._swcValue);
         });
       }
@@ -5020,9 +5304,9 @@ var dooboostoreSimpleWebComponent = (() => {
       if (isTruthy && this._masterTplNodes.length > 0) {
         this._masterTplNodes.forEach((tplNode) => {
           const clone = tplNode.cloneNode(true);
-          this.appendChild(clone);
           if (clone.style)
             clone.style.display = "contents";
+          this.appendChild(clone);
           this.applyData(clone, this._swcValue);
         });
       }
@@ -5402,9 +5686,9 @@ var dooboostoreSimpleWebComponent = (() => {
       if (isTruthy && this._masterTplNodes.length > 0) {
         this._masterTplNodes.forEach((tplNode) => {
           const clone = tplNode.cloneNode(true);
-          this.appendChild(clone);
           if (clone.style)
             clone.style.display = "contents";
+          this.appendChild(clone);
           this.applyData(clone, this._swcValue);
         });
       }
@@ -5784,9 +6068,9 @@ var dooboostoreSimpleWebComponent = (() => {
       if (isTruthy && this._masterTplNodes.length > 0) {
         this._masterTplNodes.forEach((tplNode) => {
           const clone = tplNode.cloneNode(true);
-          this.appendChild(clone);
           if (clone.style)
             clone.style.display = "contents";
+          this.appendChild(clone);
           this.applyData(clone, this._swcValue);
         });
       }
@@ -6166,9 +6450,9 @@ var dooboostoreSimpleWebComponent = (() => {
       if (isTruthy && this._masterTplNodes.length > 0) {
         this._masterTplNodes.forEach((tplNode) => {
           const clone = tplNode.cloneNode(true);
-          this.appendChild(clone);
           if (clone.style)
             clone.style.display = "contents";
+          this.appendChild(clone);
           this.applyData(clone, this._swcValue);
         });
       }
@@ -6548,9 +6832,9 @@ var dooboostoreSimpleWebComponent = (() => {
       if (isTruthy && this._masterTplNodes.length > 0) {
         this._masterTplNodes.forEach((tplNode) => {
           const clone = tplNode.cloneNode(true);
-          this.appendChild(clone);
           if (clone.style)
             clone.style.display = "contents";
+          this.appendChild(clone);
           this.applyData(clone, this._swcValue);
         });
       }
@@ -6930,9 +7214,9 @@ var dooboostoreSimpleWebComponent = (() => {
       if (isTruthy && this._masterTplNodes.length > 0) {
         this._masterTplNodes.forEach((tplNode) => {
           const clone = tplNode.cloneNode(true);
-          this.appendChild(clone);
           if (clone.style)
             clone.style.display = "contents";
+          this.appendChild(clone);
           this.applyData(clone, this._swcValue);
         });
       }
@@ -7312,9 +7596,9 @@ var dooboostoreSimpleWebComponent = (() => {
       if (isTruthy && this._masterTplNodes.length > 0) {
         this._masterTplNodes.forEach((tplNode) => {
           const clone = tplNode.cloneNode(true);
-          this.appendChild(clone);
           if (clone.style)
             clone.style.display = "contents";
+          this.appendChild(clone);
           this.applyData(clone, this._swcValue);
         });
       }
@@ -7694,9 +7978,9 @@ var dooboostoreSimpleWebComponent = (() => {
       if (isTruthy && this._masterTplNodes.length > 0) {
         this._masterTplNodes.forEach((tplNode) => {
           const clone = tplNode.cloneNode(true);
-          this.appendChild(clone);
           if (clone.style)
             clone.style.display = "contents";
+          this.appendChild(clone);
           this.applyData(clone, this._swcValue);
         });
       }
@@ -8076,9 +8360,9 @@ var dooboostoreSimpleWebComponent = (() => {
       if (isTruthy && this._masterTplNodes.length > 0) {
         this._masterTplNodes.forEach((tplNode) => {
           const clone = tplNode.cloneNode(true);
-          this.appendChild(clone);
           if (clone.style)
             clone.style.display = "contents";
+          this.appendChild(clone);
           this.applyData(clone, this._swcValue);
         });
       }
@@ -8458,9 +8742,9 @@ var dooboostoreSimpleWebComponent = (() => {
       if (isTruthy && this._masterTplNodes.length > 0) {
         this._masterTplNodes.forEach((tplNode) => {
           const clone = tplNode.cloneNode(true);
-          this.appendChild(clone);
           if (clone.style)
             clone.style.display = "contents";
+          this.appendChild(clone);
           this.applyData(clone, this._swcValue);
         });
       }
@@ -8840,9 +9124,9 @@ var dooboostoreSimpleWebComponent = (() => {
       if (isTruthy && this._masterTplNodes.length > 0) {
         this._masterTplNodes.forEach((tplNode) => {
           const clone = tplNode.cloneNode(true);
-          this.appendChild(clone);
           if (clone.style)
             clone.style.display = "contents";
+          this.appendChild(clone);
           this.applyData(clone, this._swcValue);
         });
       }
@@ -9222,9 +9506,9 @@ var dooboostoreSimpleWebComponent = (() => {
       if (isTruthy && this._masterTplNodes.length > 0) {
         this._masterTplNodes.forEach((tplNode) => {
           const clone = tplNode.cloneNode(true);
-          this.appendChild(clone);
           if (clone.style)
             clone.style.display = "contents";
+          this.appendChild(clone);
           this.applyData(clone, this._swcValue);
         });
       }
@@ -9604,9 +9888,9 @@ var dooboostoreSimpleWebComponent = (() => {
       if (isTruthy && this._masterTplNodes.length > 0) {
         this._masterTplNodes.forEach((tplNode) => {
           const clone = tplNode.cloneNode(true);
-          this.appendChild(clone);
           if (clone.style)
             clone.style.display = "contents";
+          this.appendChild(clone);
           this.applyData(clone, this._swcValue);
         });
       }
@@ -9986,9 +10270,9 @@ var dooboostoreSimpleWebComponent = (() => {
       if (isTruthy && this._masterTplNodes.length > 0) {
         this._masterTplNodes.forEach((tplNode) => {
           const clone = tplNode.cloneNode(true);
-          this.appendChild(clone);
           if (clone.style)
             clone.style.display = "contents";
+          this.appendChild(clone);
           this.applyData(clone, this._swcValue);
         });
       }
@@ -10368,9 +10652,9 @@ var dooboostoreSimpleWebComponent = (() => {
       if (isTruthy && this._masterTplNodes.length > 0) {
         this._masterTplNodes.forEach((tplNode) => {
           const clone = tplNode.cloneNode(true);
-          this.appendChild(clone);
           if (clone.style)
             clone.style.display = "contents";
+          this.appendChild(clone);
           this.applyData(clone, this._swcValue);
         });
       }
@@ -10750,9 +11034,9 @@ var dooboostoreSimpleWebComponent = (() => {
       if (isTruthy && this._masterTplNodes.length > 0) {
         this._masterTplNodes.forEach((tplNode) => {
           const clone = tplNode.cloneNode(true);
-          this.appendChild(clone);
           if (clone.style)
             clone.style.display = "contents";
+          this.appendChild(clone);
           this.applyData(clone, this._swcValue);
         });
       }
@@ -11132,9 +11416,9 @@ var dooboostoreSimpleWebComponent = (() => {
       if (isTruthy && this._masterTplNodes.length > 0) {
         this._masterTplNodes.forEach((tplNode) => {
           const clone = tplNode.cloneNode(true);
-          this.appendChild(clone);
           if (clone.style)
             clone.style.display = "contents";
+          this.appendChild(clone);
           this.applyData(clone, this._swcValue);
         });
       }
@@ -11514,9 +11798,9 @@ var dooboostoreSimpleWebComponent = (() => {
       if (isTruthy && this._masterTplNodes.length > 0) {
         this._masterTplNodes.forEach((tplNode) => {
           const clone = tplNode.cloneNode(true);
-          this.appendChild(clone);
           if (clone.style)
             clone.style.display = "contents";
+          this.appendChild(clone);
           this.applyData(clone, this._swcValue);
         });
       }
@@ -11896,9 +12180,9 @@ var dooboostoreSimpleWebComponent = (() => {
       if (isTruthy && this._masterTplNodes.length > 0) {
         this._masterTplNodes.forEach((tplNode) => {
           const clone = tplNode.cloneNode(true);
-          this.appendChild(clone);
           if (clone.style)
             clone.style.display = "contents";
+          this.appendChild(clone);
           this.applyData(clone, this._swcValue);
         });
       }
@@ -12278,9 +12562,9 @@ var dooboostoreSimpleWebComponent = (() => {
       if (isTruthy && this._masterTplNodes.length > 0) {
         this._masterTplNodes.forEach((tplNode) => {
           const clone = tplNode.cloneNode(true);
-          this.appendChild(clone);
           if (clone.style)
             clone.style.display = "contents";
+          this.appendChild(clone);
           this.applyData(clone, this._swcValue);
         });
       }
@@ -12660,9 +12944,9 @@ var dooboostoreSimpleWebComponent = (() => {
       if (isTruthy && this._masterTplNodes.length > 0) {
         this._masterTplNodes.forEach((tplNode) => {
           const clone = tplNode.cloneNode(true);
-          this.appendChild(clone);
           if (clone.style)
             clone.style.display = "contents";
+          this.appendChild(clone);
           this.applyData(clone, this._swcValue);
         });
       }
@@ -13042,9 +13326,9 @@ var dooboostoreSimpleWebComponent = (() => {
       if (isTruthy && this._masterTplNodes.length > 0) {
         this._masterTplNodes.forEach((tplNode) => {
           const clone = tplNode.cloneNode(true);
-          this.appendChild(clone);
           if (clone.style)
             clone.style.display = "contents";
+          this.appendChild(clone);
           this.applyData(clone, this._swcValue);
         });
       }
@@ -13424,9 +13708,9 @@ var dooboostoreSimpleWebComponent = (() => {
       if (isTruthy && this._masterTplNodes.length > 0) {
         this._masterTplNodes.forEach((tplNode) => {
           const clone = tplNode.cloneNode(true);
-          this.appendChild(clone);
           if (clone.style)
             clone.style.display = "contents";
+          this.appendChild(clone);
           this.applyData(clone, this._swcValue);
         });
       }
@@ -13806,9 +14090,9 @@ var dooboostoreSimpleWebComponent = (() => {
       if (isTruthy && this._masterTplNodes.length > 0) {
         this._masterTplNodes.forEach((tplNode) => {
           const clone = tplNode.cloneNode(true);
-          this.appendChild(clone);
           if (clone.style)
             clone.style.display = "contents";
+          this.appendChild(clone);
           this.applyData(clone, this._swcValue);
         });
       }
@@ -14188,9 +14472,9 @@ var dooboostoreSimpleWebComponent = (() => {
       if (isTruthy && this._masterTplNodes.length > 0) {
         this._masterTplNodes.forEach((tplNode) => {
           const clone = tplNode.cloneNode(true);
-          this.appendChild(clone);
           if (clone.style)
             clone.style.display = "contents";
+          this.appendChild(clone);
           this.applyData(clone, this._swcValue);
         });
       }
@@ -14570,9 +14854,9 @@ var dooboostoreSimpleWebComponent = (() => {
       if (isTruthy && this._masterTplNodes.length > 0) {
         this._masterTplNodes.forEach((tplNode) => {
           const clone = tplNode.cloneNode(true);
-          this.appendChild(clone);
           if (clone.style)
             clone.style.display = "contents";
+          this.appendChild(clone);
           this.applyData(clone, this._swcValue);
         });
       }
@@ -14952,9 +15236,9 @@ var dooboostoreSimpleWebComponent = (() => {
       if (isTruthy && this._masterTplNodes.length > 0) {
         this._masterTplNodes.forEach((tplNode) => {
           const clone = tplNode.cloneNode(true);
-          this.appendChild(clone);
           if (clone.style)
             clone.style.display = "contents";
+          this.appendChild(clone);
           this.applyData(clone, this._swcValue);
         });
       }
@@ -15334,9 +15618,9 @@ var dooboostoreSimpleWebComponent = (() => {
       if (isTruthy && this._masterTplNodes.length > 0) {
         this._masterTplNodes.forEach((tplNode) => {
           const clone = tplNode.cloneNode(true);
-          this.appendChild(clone);
           if (clone.style)
             clone.style.display = "contents";
+          this.appendChild(clone);
           this.applyData(clone, this._swcValue);
         });
       }
@@ -15716,9 +16000,9 @@ var dooboostoreSimpleWebComponent = (() => {
       if (isTruthy && this._masterTplNodes.length > 0) {
         this._masterTplNodes.forEach((tplNode) => {
           const clone = tplNode.cloneNode(true);
-          this.appendChild(clone);
           if (clone.style)
             clone.style.display = "contents";
+          this.appendChild(clone);
           this.applyData(clone, this._swcValue);
         });
       }
@@ -16098,9 +16382,9 @@ var dooboostoreSimpleWebComponent = (() => {
       if (isTruthy && this._masterTplNodes.length > 0) {
         this._masterTplNodes.forEach((tplNode) => {
           const clone = tplNode.cloneNode(true);
-          this.appendChild(clone);
           if (clone.style)
             clone.style.display = "contents";
+          this.appendChild(clone);
           this.applyData(clone, this._swcValue);
         });
       }
@@ -16480,9 +16764,9 @@ var dooboostoreSimpleWebComponent = (() => {
       if (isTruthy && this._masterTplNodes.length > 0) {
         this._masterTplNodes.forEach((tplNode) => {
           const clone = tplNode.cloneNode(true);
-          this.appendChild(clone);
           if (clone.style)
             clone.style.display = "contents";
+          this.appendChild(clone);
           this.applyData(clone, this._swcValue);
         });
       }
@@ -16862,9 +17146,9 @@ var dooboostoreSimpleWebComponent = (() => {
       if (isTruthy && this._masterTplNodes.length > 0) {
         this._masterTplNodes.forEach((tplNode) => {
           const clone = tplNode.cloneNode(true);
-          this.appendChild(clone);
           if (clone.style)
             clone.style.display = "contents";
+          this.appendChild(clone);
           this.applyData(clone, this._swcValue);
         });
       }
@@ -17244,9 +17528,9 @@ var dooboostoreSimpleWebComponent = (() => {
       if (isTruthy && this._masterTplNodes.length > 0) {
         this._masterTplNodes.forEach((tplNode) => {
           const clone = tplNode.cloneNode(true);
-          this.appendChild(clone);
           if (clone.style)
             clone.style.display = "contents";
+          this.appendChild(clone);
           this.applyData(clone, this._swcValue);
         });
       }
@@ -17626,9 +17910,9 @@ var dooboostoreSimpleWebComponent = (() => {
       if (isTruthy && this._masterTplNodes.length > 0) {
         this._masterTplNodes.forEach((tplNode) => {
           const clone = tplNode.cloneNode(true);
-          this.appendChild(clone);
           if (clone.style)
             clone.style.display = "contents";
+          this.appendChild(clone);
           this.applyData(clone, this._swcValue);
         });
       }
@@ -18008,9 +18292,9 @@ var dooboostoreSimpleWebComponent = (() => {
       if (isTruthy && this._masterTplNodes.length > 0) {
         this._masterTplNodes.forEach((tplNode) => {
           const clone = tplNode.cloneNode(true);
-          this.appendChild(clone);
           if (clone.style)
             clone.style.display = "contents";
+          this.appendChild(clone);
           this.applyData(clone, this._swcValue);
         });
       }
@@ -18390,9 +18674,9 @@ var dooboostoreSimpleWebComponent = (() => {
       if (isTruthy && this._masterTplNodes.length > 0) {
         this._masterTplNodes.forEach((tplNode) => {
           const clone = tplNode.cloneNode(true);
-          this.appendChild(clone);
           if (clone.style)
             clone.style.display = "contents";
+          this.appendChild(clone);
           this.applyData(clone, this._swcValue);
         });
       }
@@ -18772,9 +19056,9 @@ var dooboostoreSimpleWebComponent = (() => {
       if (isTruthy && this._masterTplNodes.length > 0) {
         this._masterTplNodes.forEach((tplNode) => {
           const clone = tplNode.cloneNode(true);
-          this.appendChild(clone);
           if (clone.style)
             clone.style.display = "contents";
+          this.appendChild(clone);
           this.applyData(clone, this._swcValue);
         });
       }
@@ -19154,9 +19438,9 @@ var dooboostoreSimpleWebComponent = (() => {
       if (isTruthy && this._masterTplNodes.length > 0) {
         this._masterTplNodes.forEach((tplNode) => {
           const clone = tplNode.cloneNode(true);
-          this.appendChild(clone);
           if (clone.style)
             clone.style.display = "contents";
+          this.appendChild(clone);
           this.applyData(clone, this._swcValue);
         });
       }
@@ -19536,9 +19820,9 @@ var dooboostoreSimpleWebComponent = (() => {
       if (isTruthy && this._masterTplNodes.length > 0) {
         this._masterTplNodes.forEach((tplNode) => {
           const clone = tplNode.cloneNode(true);
-          this.appendChild(clone);
           if (clone.style)
             clone.style.display = "contents";
+          this.appendChild(clone);
           this.applyData(clone, this._swcValue);
         });
       }
@@ -19918,9 +20202,9 @@ var dooboostoreSimpleWebComponent = (() => {
       if (isTruthy && this._masterTplNodes.length > 0) {
         this._masterTplNodes.forEach((tplNode) => {
           const clone = tplNode.cloneNode(true);
-          this.appendChild(clone);
           if (clone.style)
             clone.style.display = "contents";
+          this.appendChild(clone);
           this.applyData(clone, this._swcValue);
         });
       }
@@ -20300,9 +20584,9 @@ var dooboostoreSimpleWebComponent = (() => {
       if (isTruthy && this._masterTplNodes.length > 0) {
         this._masterTplNodes.forEach((tplNode) => {
           const clone = tplNode.cloneNode(true);
-          this.appendChild(clone);
           if (clone.style)
             clone.style.display = "contents";
+          this.appendChild(clone);
           this.applyData(clone, this._swcValue);
         });
       }
@@ -20682,9 +20966,9 @@ var dooboostoreSimpleWebComponent = (() => {
       if (isTruthy && this._masterTplNodes.length > 0) {
         this._masterTplNodes.forEach((tplNode) => {
           const clone = tplNode.cloneNode(true);
-          this.appendChild(clone);
           if (clone.style)
             clone.style.display = "contents";
+          this.appendChild(clone);
           this.applyData(clone, this._swcValue);
         });
       }
@@ -21064,9 +21348,9 @@ var dooboostoreSimpleWebComponent = (() => {
       if (isTruthy && this._masterTplNodes.length > 0) {
         this._masterTplNodes.forEach((tplNode) => {
           const clone = tplNode.cloneNode(true);
-          this.appendChild(clone);
           if (clone.style)
             clone.style.display = "contents";
+          this.appendChild(clone);
           this.applyData(clone, this._swcValue);
         });
       }
@@ -21446,9 +21730,9 @@ var dooboostoreSimpleWebComponent = (() => {
       if (isTruthy && this._masterTplNodes.length > 0) {
         this._masterTplNodes.forEach((tplNode) => {
           const clone = tplNode.cloneNode(true);
-          this.appendChild(clone);
           if (clone.style)
             clone.style.display = "contents";
+          this.appendChild(clone);
           this.applyData(clone, this._swcValue);
         });
       }
@@ -21828,9 +22112,9 @@ var dooboostoreSimpleWebComponent = (() => {
       if (isTruthy && this._masterTplNodes.length > 0) {
         this._masterTplNodes.forEach((tplNode) => {
           const clone = tplNode.cloneNode(true);
-          this.appendChild(clone);
           if (clone.style)
             clone.style.display = "contents";
+          this.appendChild(clone);
           this.applyData(clone, this._swcValue);
         });
       }
@@ -22210,9 +22494,9 @@ var dooboostoreSimpleWebComponent = (() => {
       if (isTruthy && this._masterTplNodes.length > 0) {
         this._masterTplNodes.forEach((tplNode) => {
           const clone = tplNode.cloneNode(true);
-          this.appendChild(clone);
           if (clone.style)
             clone.style.display = "contents";
+          this.appendChild(clone);
           this.applyData(clone, this._swcValue);
         });
       }
@@ -22592,9 +22876,9 @@ var dooboostoreSimpleWebComponent = (() => {
       if (isTruthy && this._masterTplNodes.length > 0) {
         this._masterTplNodes.forEach((tplNode) => {
           const clone = tplNode.cloneNode(true);
-          this.appendChild(clone);
           if (clone.style)
             clone.style.display = "contents";
+          this.appendChild(clone);
           this.applyData(clone, this._swcValue);
         });
       }
@@ -22974,9 +23258,9 @@ var dooboostoreSimpleWebComponent = (() => {
       if (isTruthy && this._masterTplNodes.length > 0) {
         this._masterTplNodes.forEach((tplNode) => {
           const clone = tplNode.cloneNode(true);
-          this.appendChild(clone);
           if (clone.style)
             clone.style.display = "contents";
+          this.appendChild(clone);
           this.applyData(clone, this._swcValue);
         });
       }
@@ -23356,9 +23640,9 @@ var dooboostoreSimpleWebComponent = (() => {
       if (isTruthy && this._masterTplNodes.length > 0) {
         this._masterTplNodes.forEach((tplNode) => {
           const clone = tplNode.cloneNode(true);
-          this.appendChild(clone);
           if (clone.style)
             clone.style.display = "contents";
+          this.appendChild(clone);
           this.applyData(clone, this._swcValue);
         });
       }
@@ -23738,9 +24022,9 @@ var dooboostoreSimpleWebComponent = (() => {
       if (isTruthy && this._masterTplNodes.length > 0) {
         this._masterTplNodes.forEach((tplNode) => {
           const clone = tplNode.cloneNode(true);
-          this.appendChild(clone);
           if (clone.style)
             clone.style.display = "contents";
+          this.appendChild(clone);
           this.applyData(clone, this._swcValue);
         });
       }