@dooboostore/simple-web-component 1.0.21 → 1.0.23

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

@@ -1119,7 +1119,7 @@ var dooboostoreSimpleWebComponent = (() => {
   var bundle_entry_exports = {};
   __export(bundle_entry_exports, {
     ADD_EVENT_LISTENER_METADATA_KEY: () => ADD_EVENT_LISTENER_METADATA_KEY,
-    APPEND_CHILD_METADATA_KEY: () => APPEND_CHILD_METADATA_KEY,
+    APPLY_NODE_METADATA_KEY: () => APPLY_NODE_METADATA_KEY,
     ATTRIBUTE_CHANGED_WILDCARD: () => ATTRIBUTE_CHANGED_WILDCARD,
     ATTRIBUTE_METADATA_KEY: () => ATTRIBUTE_METADATA_KEY,
     BROWSER_GLOBALS: () => BROWSER_GLOBALS,
@@ -1128,6 +1128,7 @@ var dooboostoreSimpleWebComponent = (() => {
     ELEMENT_CONFIG_KEY: () => ELEMENT_CONFIG_KEY,
     EMIT_CUSTOM_EVENT_METADATA_KEY: () => EMIT_CUSTOM_EVENT_METADATA_KEY,
     HTML_TAG_ENTRIES: () => HTML_TAG_ENTRIES,
+    INNER_HTML_METADATA_KEY: () => INNER_HTML_METADATA_KEY,
     InjectSituationType: () => InjectSituationType,
     ON_ADD_EVENT_LISTENER_METADATA_KEY: () => ON_ADD_EVENT_LISTENER_METADATA_KEY,
     ON_AFTER_ADOPTED_METADATA_KEY: () => ON_AFTER_ADOPTED_METADATA_KEY,
@@ -1137,38 +1138,61 @@ var dooboostoreSimpleWebComponent = (() => {
     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,
+    ON_CONSTRUCTOR_METADATA_KEY: () => ON_CONSTRUCTOR_METADATA_KEY,
     QUERY_ALL_METADATA_KEY: () => QUERY_ALL_METADATA_KEY,
     QUERY_METADATA_KEY: () => QUERY_METADATA_KEY,
-    REPLACE_CHILDREN_METADATA_KEY: () => REPLACE_CHILDREN_METADATA_KEY,
     SET_ATTRIBUTE_METADATA_KEY: () => SET_ATTRIBUTE_METADATA_KEY,
     STYLE_METADATA_KEY: () => STYLE_METADATA_KEY,
     SWC_NOT_FOUND: () => SWC_NOT_FOUND,
     SwcUtils: () => SwcUtils,
     TemplateUtils: () => TemplateUtils,
     addClassList: () => addClassList,
+    addClassListHost: () => addClassListHost,
     addEventListener: () => addEventListener,
-    appendChild: () => appendChild,
+    addEventListenerHost: () => addEventListenerHost,
+    applyAfterBeginNode: () => applyAfterBeginNode,
+    applyAfterBeginNodeHost: () => applyAfterBeginNodeHost,
+    applyAfterEndNode: () => applyAfterEndNode,
+    applyAfterEndNodeHost: () => applyAfterEndNodeHost,
+    applyBeforeBeginNode: () => applyBeforeBeginNode,
+    applyBeforeBeginNodeHost: () => applyBeforeBeginNodeHost,
+    applyBeforeEndNode: () => applyBeforeEndNode,
+    applyBeforeEndNodeHost: () => applyBeforeEndNodeHost,
+    applyInnerHtmlNode: () => applyInnerHtmlNode,
+    applyInnerHtmlNodeHost: () => applyInnerHtmlNodeHost,
+    applyInnerTextNode: () => applyInnerTextNode,
+    applyInnerTextNodeHost: () => applyInnerTextNodeHost,
+    applyNode: () => applyNode,
+    applyNodeHost: () => applyNodeHost,
+    applyRemoveNode: () => applyRemoveNode,
+    applyRemoveNodeHost: () => applyRemoveNodeHost,
+    applyReplaceChildrenNode: () => applyReplaceChildrenNode,
+    applyReplaceChildrenNodeHost: () => applyReplaceChildrenNodeHost,
+    applyReplaceNode: () => applyReplaceNode,
+    applyReplaceNodeHost: () => applyReplaceNodeHost,
     attribute: () => attribute,
-    changedAttribute: () => changedAttribute,
+    attributeHost: () => attributeHost,
+    changedAttributeHost: () => changedAttributeHost,
+    commentNode: () => commentNode,
     createElement: () => createElement,
     elementDefine: () => elementDefine,
     emitCustomEvent: () => emitCustomEvent,
+    emitCustomEventHost: () => emitCustomEventHost,
     ensureInit: () => ensureInit2,
-    findAllAppendChildMetadata: () => findAllAppendChildMetadata,
+    findAllApplyNodeMetadata: () => findAllApplyNodeMetadata,
     findAllAttributeChangedMetadata: () => findAllAttributeChangedMetadata,
     findAllAttributeMetadata: () => findAllAttributeMetadata,
     findAllClassListMetadata: () => findAllClassListMetadata,
     findAllLifecycleMetadata: () => findAllLifecycleMetadata,
-    findAllReplaceChildrenMetadata: () => findAllReplaceChildrenMetadata,
     findAllSetAttributeMetadata: () => findAllSetAttributeMetadata,
     findAllStyleMetadata: () => findAllStyleMetadata,
     getAddEventListenerMetadata: () => getAddEventListenerMetadata,
     getChangedAttributeMetadata: () => getChangedAttributeMetadata,
     getElementConfig: () => getElementConfig,
     getEmitCustomEventMetadataList: () => getEmitCustomEventMetadataList,
+    getOnConnectedInnerHtmlMetadata: () => getOnConnectedInnerHtmlMetadata,
     getQueryAllMetadata: () => getQueryAllMetadata,
     getQueryMetadata: () => getQueryMetadata,
-    getReplaceChildrenMetadata: () => getReplaceChildrenMetadata,
     getSetAttributeMetadata: () => getSetAttributeMetadata,
     htmlAElement: () => htmlAElement,
     htmlArticleElement: () => htmlArticleElement,
@@ -1197,20 +1221,30 @@ var dooboostoreSimpleWebComponent = (() => {
     onBeforeDisconnected: () => onBeforeDisconnected,
     onConnected: () => onConnected,
     onConnectedInnerHtml: () => onConnectedInnerHtml,
+    onConstructor: () => onConstructor,
     onDisconnected: () => onDisconnected,
     query: () => query,
     queryAll: () => queryAll,
+    queryAllHost: () => queryAllHost,
+    queryHost: () => queryHost,
     removeClassList: () => removeClassList,
+    removeClassListHost: () => removeClassListHost,
     removeStyle: () => removeStyle,
-    replaceChildren: () => replaceChildren,
+    removeStyleHost: () => removeStyleHost,
     resolveTargetEls: () => resolveTargetEls,
     setAttribute: () => setAttribute,
+    setAttributeHost: () => setAttributeHost,
     setClassList: () => setClassList,
+    setClassListHost: () => setClassListHost,
     setStyle: () => setStyle,
+    setStyleHost: () => setStyleHost,
     textNode: () => textNode,
     toggleClassList: () => toggleClassList,
+    toggleClassListHost: () => toggleClassListHost,
     updateClassList: () => updateClassList,
-    updateStyle: () => updateStyle
+    updateClassListHost: () => updateClassListHost,
+    updateStyle: () => updateStyle,
+    updateStyleHost: () => updateStyleHost
   });
   var import_reflect_metadata2 = __toESM(require_Reflect(), 1);
 
@@ -5817,30 +5851,6 @@ var dooboostoreSimpleWebComponent = (() => {
     })(Path = Expression2.Path || (Expression2.Path = {}));
   })(Expression || (Expression = {}));
 
-  // src/decorators/onConnectedInnerHtml.ts
-  var INNER_HTML_METADATA_KEY = Symbol("simple-web-component:inner-html");
-  function onConnectedInnerHtml(arg1, arg2, arg3) {
-    const decorator = (options, target, propertyKey) => {
-      const constructor = target.constructor;
-      let list = ReflectUtils.getMetadata(INNER_HTML_METADATA_KEY, constructor);
-      if (!list) {
-        list = [];
-        ReflectUtils.defineMetadata(INNER_HTML_METADATA_KEY, list, constructor);
-      }
-      list.push({ propertyKey, options });
-    };
-    if (arg2) {
-      return decorator({}, arg1, arg2);
-    }
-    return (target, propertyKey) => {
-      decorator(arg1 || {}, target, propertyKey);
-    };
-  }
-  var getOnConnectedInnerHtmlMetadata = (target) => {
-    const constructor = target instanceof Function ? target : target.constructor;
-    return ReflectUtils.getMetadata(INNER_HTML_METADATA_KEY, constructor);
-  };
-
   // src/decorators/addEventListener.ts
   var ADD_EVENT_LISTENER_METADATA_KEY = Symbol("simple-web-component:add-event-listener");
   function addEventListener(selectorOrTarget, type, options = {}) {
@@ -5858,8 +5868,12 @@ var dooboostoreSimpleWebComponent = (() => {
     const constructor = target instanceof Function ? target : target.constructor;
     return ReflectUtils.getMetadata(ADD_EVENT_LISTENER_METADATA_KEY, constructor);
   };
+  function addEventListenerHost(type, options) {
+    return addEventListener(":host", type, options);
+  }
 
   // src/decorators/lifecycles.ts
+  var ON_CONSTRUCTOR_METADATA_KEY = Symbol("simple-web-component:on-constructor");
   var ON_BEFORE_CONNECTED_METADATA_KEY = Symbol("simple-web-component:on-before-connected");
   var ON_AFTER_CONNECTED_METADATA_KEY = Symbol("simple-web-component:on-after-connected");
   var ON_BEFORE_DISCONNECTED_METADATA_KEY = Symbol("simple-web-component:on-before-disconnected");
@@ -5867,6 +5881,7 @@ var dooboostoreSimpleWebComponent = (() => {
   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 INNER_HTML_METADATA_KEY = Symbol("simple-web-component:inner-html");
   var ATTRIBUTE_CHANGED_WILDCARD = "*";
   function createLifecycleDecorator(metadataKey) {
     return (target, propertyKey) => {
@@ -5879,6 +5894,7 @@ var dooboostoreSimpleWebComponent = (() => {
       list.push(propertyKey);
     };
   }
+  var onConstructor = createLifecycleDecorator(ON_CONSTRUCTOR_METADATA_KEY);
   var onBeforeConnected = createLifecycleDecorator(ON_BEFORE_CONNECTED_METADATA_KEY);
   var onAfterConnected = createLifecycleDecorator(ON_AFTER_CONNECTED_METADATA_KEY);
   var onConnected = onAfterConnected;
@@ -5889,10 +5905,31 @@ var dooboostoreSimpleWebComponent = (() => {
   var onAfterAdopted = createLifecycleDecorator(ON_AFTER_ADOPTED_METADATA_KEY);
   var onAdopted = onAfterAdopted;
   var onAddEventListener = createLifecycleDecorator(ON_ADD_EVENT_LISTENER_METADATA_KEY);
+  function onConnectedInnerHtml(arg1, arg2, arg3) {
+    const decorator = (options, target, propertyKey) => {
+      const constructor = target.constructor;
+      let list = ReflectUtils.getMetadata(INNER_HTML_METADATA_KEY, constructor);
+      if (!list) {
+        list = [];
+        ReflectUtils.defineMetadata(INNER_HTML_METADATA_KEY, list, constructor);
+      }
+      list.push({ propertyKey, options });
+    };
+    if (arg2) {
+      return decorator({}, arg1, arg2);
+    }
+    return (target, propertyKey) => {
+      decorator(arg1 || {}, target, propertyKey);
+    };
+  }
   var findAllLifecycleMetadata = (target, metadataKey) => {
     const results = ReflectUtils.findAllMetadataFlatten(metadataKey, target);
     return results.length > 0 ? results : void 0;
   };
+  var getOnConnectedInnerHtmlMetadata = (target) => {
+    const constructor = target instanceof Function ? target : target.constructor;
+    return ReflectUtils.getMetadata(INNER_HTML_METADATA_KEY, constructor);
+  };
 
   // src/decorators/attribute.ts
   var ATTRIBUTE_METADATA_KEY = Symbol("simple-web-component:attribute");
@@ -5959,6 +5996,20 @@ var dooboostoreSimpleWebComponent = (() => {
         ReflectUtils.defineMetadata(ATTRIBUTE_METADATA_KEY, metaList, constructor);
       }
       metaList.push({ propertyKey, selector, options, privateKey });
+      const applySetAttribute = (inst, targets, attrName, nv) => {
+        targets.forEach((it) => {
+          console.log("----->", it);
+          if (it && typeof it.setAttribute === "function") {
+            if (nv === null) {
+              it.removeAttribute(attrName);
+            } else {
+              it.setAttribute(attrName, String(nv));
+            }
+          } else {
+            inst[privateKey] = nv;
+          }
+        });
+      };
       Object.defineProperty(target, propertyKey, {
         get() {
           const attrName = options.name || String(propertyKey);
@@ -5985,19 +6036,21 @@ var dooboostoreSimpleWebComponent = (() => {
           const attrName = options.name || String(propertyKey);
           const conf = getElementConfig(this);
           const currentWin = this._resolveWindow?.(conf) || (typeof window !== "undefined" ? window : void 0);
-          const targets = resolveTargetEls(this, selector, options, currentWin);
-          targets.forEach((it) => {
-            console.log("----->", it);
-            if (it && typeof it.setAttribute === "function") {
-              if (nv === null) {
-                it.removeAttribute(attrName);
-              } else {
-                it.setAttribute(attrName, String(nv));
-              }
+          if (this.__swc_syncing_init) {
+            if (options.connectedInitialize === true) {
+              const targets2 = resolveTargetEls(this, selector, options, currentWin);
+              applySetAttribute(this, targets2, attrName, nv);
             } else {
               this[privateKey] = nv;
             }
-          });
+            return;
+          }
+          if (!this.__swc_connected) {
+            this[privateKey] = nv;
+            return;
+          }
+          const targets = resolveTargetEls(this, selector, options, currentWin);
+          applySetAttribute(this, targets, attrName, nv);
         },
         enumerable: true,
         configurable: true
@@ -6007,10 +6060,13 @@ var dooboostoreSimpleWebComponent = (() => {
   var findAllAttributeMetadata = (target) => {
     return ReflectUtils.findAllMetadata(ATTRIBUTE_METADATA_KEY, target).flat();
   };
+  function attributeHost(attrName, options = {}) {
+    return attribute(":host", { ...options, name: attrName });
+  }
 
-  // src/decorators/changedAttribute.ts
+  // src/decorators/changedAttributeHost.ts
   var ON_ATTRIBUTE_CHANGED_METADATA_KEY = Symbol("simple-web-component:on-attribute-changed");
-  function changedAttribute(attributeName) {
+  function changedAttributeHost(attributeName) {
     return (target, propertyKey) => {
       const constructor = target.constructor;
       let meta = ReflectUtils.getOwnMetadata(ON_ATTRIBUTE_CHANGED_METADATA_KEY, constructor);
@@ -6114,62 +6170,12 @@ var dooboostoreSimpleWebComponent = (() => {
     });
     return result;
   };
-
-  // src/decorators/replaceChildren.ts
-  var REPLACE_CHILDREN_METADATA_KEY = Symbol("simple-web-component:replace-children");
-  function replaceChildren(selector) {
-    return (target, propertyKey, descriptor) => {
-      const constructor = target.constructor;
-      let meta = ReflectUtils.getOwnMetadata(REPLACE_CHILDREN_METADATA_KEY, constructor);
-      if (!meta) {
-        meta = /* @__PURE__ */ new Map();
-        ReflectUtils.defineMetadata(REPLACE_CHILDREN_METADATA_KEY, meta, constructor);
-      }
-      meta.set(propertyKey, selector);
-      const original = descriptor.value;
-      descriptor.value = async function(...args) {
-        ensureInit2(this);
-        const res = await original.apply(this, args);
-        if (res !== void 0) {
-          const conf = getElementConfig(this);
-          const currentWin = this._resolveWindow?.(conf) || (typeof window !== "undefined" ? window : void 0);
-          const currentDoc = currentWin.document;
-          let targetEl = null;
-          if (selector === ":host" || !selector) {
-            targetEl = this;
-          } else {
-            targetEl = (this.shadowRoot || this).querySelector(selector);
-          }
-          if (targetEl) {
-            if (typeof res === "string") {
-              targetEl.textContent = res;
-            } else {
-              const nodes = Array.isArray(res) ? res.map((n) => typeof n === "string" ? currentDoc.createTextNode(n) : n) : [res];
-              targetEl.replaceChildren(...nodes);
-            }
-          }
-        }
-        return res;
-      };
-    };
+  function setAttributeHost(name, options) {
+    return setAttribute(":host", name, options);
   }
-  var getReplaceChildrenMetadata = (target) => {
-    const constructor = target instanceof Function ? target : target.constructor;
-    return ReflectUtils.getMetadata(REPLACE_CHILDREN_METADATA_KEY, constructor);
-  };
-  var findAllReplaceChildrenMetadata = (target) => {
-    const result = /* @__PURE__ */ new Map();
-    const maps = ReflectUtils.findAllMetadata(REPLACE_CHILDREN_METADATA_KEY, target);
-    maps.forEach((map) => {
-      if (map instanceof Map) {
-        map.forEach((v, k) => result.set(k, v));
-      }
-    });
-    return result;
-  };
 
-  // src/decorators/appendChild.ts
-  var APPEND_CHILD_METADATA_KEY = Symbol("simple-web-component:append-child");
+  // src/decorators/applyNode.ts
+  var APPLY_NODE_METADATA_KEY = Symbol("simple-web-component:apply-node");
   var normalizeNodes = (res, doc) => {
     const items = Array.isArray(res) ? res : [res];
     return items.map((it) => {
@@ -6178,13 +6184,13 @@ var dooboostoreSimpleWebComponent = (() => {
       return doc.createTextNode(it !== void 0 && it !== null ? String(it) : "");
     });
   };
-  function appendChild(selector, options = { position: "beforeEnd" }) {
+  function applyNode(selector, options = { position: "beforeEnd" }) {
     return (target, propertyKey, descriptor) => {
       const constructor = target.constructor;
-      let metaList = ReflectUtils.getOwnMetadata(APPEND_CHILD_METADATA_KEY, constructor);
+      let metaList = ReflectUtils.getOwnMetadata(APPLY_NODE_METADATA_KEY, constructor);
       if (!metaList) {
         metaList = /* @__PURE__ */ new Map();
-        ReflectUtils.defineMetadata(APPEND_CHILD_METADATA_KEY, metaList, constructor);
+        ReflectUtils.defineMetadata(APPLY_NODE_METADATA_KEY, metaList, constructor);
       }
       metaList.set(propertyKey, { propertyKey, selector, options });
       const original = descriptor.value;
@@ -6195,28 +6201,70 @@ var dooboostoreSimpleWebComponent = (() => {
           const conf = getElementConfig(this);
           const currentWin = this._resolveWindow?.(conf) || (typeof window !== "undefined" ? window : void 0);
           const currentDoc = currentWin.document;
-          let targetEl = null;
-          if (selector === ":host" || !selector) {
-            targetEl = this;
+          const pos = options.position || "beforeEnd";
+          const r = options.root || "auto";
+          const getTargetRoot = () => {
+            if (r === "shadow")
+              return this.shadowRoot;
+            if (r === "light")
+              return this;
+            if (r === "all")
+              return this.shadowRoot || this;
+            return this.shadowRoot || this;
+          };
+          if (pos === "remove") {
+            if (res) {
+              if (selector === ":host" || !selector) {
+                if (r === "shadow" && this.shadowRoot) {
+                  this.shadowRoot.replaceChildren();
+                } else {
+                  this.remove();
+                }
+              } else {
+                const targetRoot = getTargetRoot();
+                if (targetRoot) {
+                  const targets = targetRoot.querySelectorAll(selector);
+                  targets.forEach((el) => el.remove());
+                }
+              }
+            }
           } else {
-            targetEl = (this.shadowRoot || this).querySelector(selector);
-          }
-          if (targetEl) {
-            const nodes = normalizeNodes(res, currentDoc);
-            const pos = options.position || "beforeEnd";
-            if (typeof res === "string") {
-              targetEl.insertAdjacentText(pos, res);
-            } else if (Array.isArray(res) && res.every((n) => typeof n === "string")) {
-              targetEl.insertAdjacentText(pos, res.join(""));
+            let targetEl = null;
+            if (selector === ":host" || !selector) {
+              if (r === "shadow") {
+                targetEl = this.shadowRoot;
+              } else {
+                targetEl = this;
+              }
             } else {
-              if (pos === "beforeEnd")
-                targetEl.append(...nodes);
-              else if (pos === "afterBegin")
-                targetEl.prepend(...nodes);
-              else if (pos === "beforeBegin")
-                targetEl.before(...nodes);
-              else if (pos === "afterEnd")
-                targetEl.after(...nodes);
+              const targetRoot = getTargetRoot();
+              targetEl = targetRoot ? targetRoot.querySelector(selector) : null;
+            }
+            if (targetEl) {
+              const isShadowRoot = targetEl instanceof ShadowRoot;
+              const nodes = normalizeNodes(res, currentDoc);
+              if (pos === "replace") {
+                if (!isShadowRoot) {
+                  targetEl.replaceWith(...nodes);
+                }
+              } else if (pos === "replaceChildren") {
+                targetEl.replaceChildren(...nodes);
+              } else if (pos === "innerHtml") {
+                targetEl.innerHTML = res !== void 0 && res !== null ? String(res) : "";
+              } else if (pos === "innerText") {
+                if (targetEl.innerText !== void 0) {
+                  targetEl.innerText = res !== void 0 && res !== null ? String(res) : "";
+                }
+              } else {
+                if (pos === "beforeEnd")
+                  targetEl.append(...nodes);
+                else if (pos === "afterBegin")
+                  targetEl.prepend(...nodes);
+                else if (pos === "beforeBegin" && !isShadowRoot)
+                  targetEl.before(...nodes);
+                else if (pos === "afterEnd" && !isShadowRoot)
+                  targetEl.after(...nodes);
+              }
             }
           }
         }
@@ -6224,9 +6272,9 @@ var dooboostoreSimpleWebComponent = (() => {
       };
     };
   }
-  var findAllAppendChildMetadata = (target) => {
+  var findAllApplyNodeMetadata = (target) => {
     const result = /* @__PURE__ */ new Map();
-    const maps = ReflectUtils.findAllMetadata(APPEND_CHILD_METADATA_KEY, target);
+    const maps = ReflectUtils.findAllMetadata(APPLY_NODE_METADATA_KEY, target);
     maps.forEach((map) => {
       if (map instanceof Map) {
         map.forEach((v, k) => result.set(k, v));
@@ -6234,6 +6282,27 @@ var dooboostoreSimpleWebComponent = (() => {
     });
     return result;
   };
+  function applyNodeHost(options = { position: "beforeEnd" }) {
+    return applyNode(":host", options);
+  }
+  var applyBeforeBeginNode = (selector, options = {}) => applyNode(selector, { ...options, position: "beforeBegin" });
+  var applyAfterBeginNode = (selector, options = {}) => applyNode(selector, { ...options, position: "afterBegin" });
+  var applyBeforeEndNode = (selector, options = {}) => applyNode(selector, { ...options, position: "beforeEnd" });
+  var applyAfterEndNode = (selector, options = {}) => applyNode(selector, { ...options, position: "afterEnd" });
+  var applyReplaceNode = (selector, options = {}) => applyNode(selector, { ...options, position: "replace" });
+  var applyReplaceChildrenNode = (selector, options = {}) => applyNode(selector, { ...options, position: "replaceChildren" });
+  var applyInnerHtmlNode = (selector, options = {}) => applyNode(selector, { ...options, position: "innerHtml" });
+  var applyInnerTextNode = (selector, options = {}) => applyNode(selector, { ...options, position: "innerText" });
+  var applyRemoveNode = (selector, options = {}) => applyNode(selector, { ...options, position: "remove" });
+  var applyBeforeBeginNodeHost = (options = {}) => applyNode(":host", { ...options, position: "beforeBegin" });
+  var applyAfterBeginNodeHost = (options = {}) => applyNode(":host", { ...options, position: "afterBegin" });
+  var applyBeforeEndNodeHost = (options = {}) => applyNode(":host", { ...options, position: "beforeEnd" });
+  var applyAfterEndNodeHost = (options = {}) => applyNode(":host", { ...options, position: "afterEnd" });
+  var applyReplaceNodeHost = (options = {}) => applyNode(":host", { ...options, position: "replace" });
+  var applyReplaceChildrenNodeHost = (options = {}) => applyNode(":host", { ...options, position: "replaceChildren" });
+  var applyInnerHtmlNodeHost = (options = {}) => applyNode(":host", { ...options, position: "innerHtml" });
+  var applyInnerTextNodeHost = (options = {}) => applyNode(":host", { ...options, position: "innerText" });
+  var applyRemoveNodeHost = (options = {}) => applyNode(":host", { ...options, position: "remove" });
 
   // src/decorators/query.ts
   var QUERY_METADATA_KEY = Symbol("simple-web-component:query");
@@ -6334,6 +6403,9 @@ var dooboostoreSimpleWebComponent = (() => {
     const constructor = target instanceof Function ? target : target.constructor;
     return ReflectUtils.getMetadata(QUERY_METADATA_KEY, constructor);
   };
+  function queryHost(options) {
+    return query(":host", options);
+  }
 
   // src/decorators/queryAll.ts
   var QUERY_ALL_METADATA_KEY = Symbol("simple-web-component:query-all");
@@ -6431,11 +6503,14 @@ var dooboostoreSimpleWebComponent = (() => {
     const constructor = target instanceof Function ? target : target.constructor;
     return ReflectUtils.getMetadata(QUERY_ALL_METADATA_KEY, constructor);
   };
+  function queryAllHost(options) {
+    return queryAll(":host", options);
+  }
 
   // src/decorators/classList.ts
   var CLASS_LIST_METADATA_KEY = Symbol("simple-web-component:class-list");
   function createClassListDecorator(action) {
-    return (selector) => {
+    return (selector, options = {}) => {
       return (target, propertyKey, descriptor) => {
         const constructor = target.constructor;
         let metaList = ReflectUtils.getOwnMetadata(CLASS_LIST_METADATA_KEY, constructor);
@@ -6443,19 +6518,39 @@ var dooboostoreSimpleWebComponent = (() => {
           metaList = /* @__PURE__ */ new Map();
           ReflectUtils.defineMetadata(CLASS_LIST_METADATA_KEY, metaList, constructor);
         }
-        metaList.set(propertyKey, { propertyKey, selector, action });
+        metaList.set(propertyKey, { propertyKey, selector, action, options });
         const original = descriptor.value;
         descriptor.value = async function(...args) {
           ensureInit2(this);
           const res = await original.apply(this, args);
           if (res !== void 0) {
+            const r = options.root || "auto";
             const hostSet = SwcUtils.getHostSet(this);
-            let targetEl = null;
-            if (selector === ":host" || !selector) targetEl = this;
-            else if (selector === ":parentHost") targetEl = hostSet.$parentHost;
-            else if (selector === ":appHost") targetEl = hostSet.$appHost;
-            else targetEl = (this.shadowRoot || this).querySelector(selector);
-            if (targetEl) {
+            const targetEls = [];
+            if (selector === ":host" || !selector) {
+              targetEls.push(this);
+            } else if (selector === ":parentHost") {
+              if (hostSet.$parentHost) targetEls.push(hostSet.$parentHost);
+            } else if (selector === ":appHost") {
+              if (hostSet.$appHost) targetEls.push(hostSet.$appHost);
+            } else {
+              if (r === "shadow") {
+                const found = this.shadowRoot?.querySelectorAll(selector);
+                if (found) targetEls.push(...found);
+              } else if (r === "light") {
+                const found = this.querySelectorAll(selector);
+                if (found) targetEls.push(...found);
+              } else if (r === "all") {
+                const sFound = this.shadowRoot?.querySelectorAll(selector);
+                const lFound = this.querySelectorAll(selector);
+                if (sFound) targetEls.push(...sFound);
+                if (lFound) targetEls.push(...lFound);
+              } else {
+                const found = (this.shadowRoot || this).querySelectorAll(selector);
+                if (found) targetEls.push(...found);
+              }
+            }
+            targetEls.forEach((targetEl) => {
               if (action === "set") {
                 let classes = "";
                 if (typeof res === "object" && res !== null && !Array.isArray(res)) {
@@ -6483,18 +6578,23 @@ var dooboostoreSimpleWebComponent = (() => {
                 const classes = Array.isArray(res) ? res.map(String) : [String(res)];
                 classes.forEach((c) => targetEl.classList.toggle(c));
               }
-            }
+            });
           }
           return res;
         };
       };
     };
   }
-  var setClassList = createClassListDecorator("set");
-  var updateClassList = createClassListDecorator("update");
-  var addClassList = createClassListDecorator("add");
-  var removeClassList = createClassListDecorator("remove");
-  var toggleClassList = createClassListDecorator("toggle");
+  var setClassList = (selector, options = {}) => createClassListDecorator("set")(selector, options);
+  var updateClassList = (selector, options = {}) => createClassListDecorator("update")(selector, options);
+  var addClassList = (selector, options = {}) => createClassListDecorator("add")(selector, options);
+  var removeClassList = (selector, options = {}) => createClassListDecorator("remove")(selector, options);
+  var toggleClassList = (selector, options = {}) => createClassListDecorator("toggle")(selector, options);
+  var setClassListHost = (options = {}) => createClassListDecorator("set")(":host", options);
+  var updateClassListHost = (options = {}) => createClassListDecorator("update")(":host", options);
+  var addClassListHost = (options = {}) => createClassListDecorator("add")(":host", options);
+  var removeClassListHost = (options = {}) => createClassListDecorator("remove")(":host", options);
+  var toggleClassListHost = (options = {}) => createClassListDecorator("toggle")(":host", options);
   var findAllClassListMetadata = (target) => {
     const result = /* @__PURE__ */ new Map();
     const maps = ReflectUtils.findAllMetadata(CLASS_LIST_METADATA_KEY, target);
@@ -6509,7 +6609,7 @@ var dooboostoreSimpleWebComponent = (() => {
   // src/decorators/style.ts
   var STYLE_METADATA_KEY = Symbol("simple-web-component:style");
   function createStyleDecorator(action) {
-    return (selector) => {
+    return (selector, options = {}) => {
       return (target, propertyKey, descriptor) => {
         const constructor = target.constructor;
         let metaList = ReflectUtils.getOwnMetadata(STYLE_METADATA_KEY, constructor);
@@ -6517,19 +6617,39 @@ var dooboostoreSimpleWebComponent = (() => {
           metaList = /* @__PURE__ */ new Map();
           ReflectUtils.defineMetadata(STYLE_METADATA_KEY, metaList, constructor);
         }
-        metaList.set(propertyKey, { propertyKey, selector, action });
+        metaList.set(propertyKey, { propertyKey, selector, action, options });
         const original = descriptor.value;
         descriptor.value = async function(...args) {
           ensureInit2(this);
           const res = await original.apply(this, args);
           if (res !== void 0) {
+            const r = options.root || "auto";
             const hostSet = SwcUtils.getHostSet(this);
-            let targetEl = null;
-            if (selector === ":host" || !selector) targetEl = this;
-            else if (selector === ":parentHost") targetEl = hostSet.$parentHost;
-            else if (selector === ":appHost") targetEl = hostSet.$appHost;
-            else targetEl = (this.shadowRoot || this).querySelector(selector);
-            if (targetEl) {
+            const targetEls = [];
+            if (selector === ":host" || !selector) {
+              targetEls.push(this);
+            } else if (selector === ":parentHost") {
+              if (hostSet.$parentHost) targetEls.push(hostSet.$parentHost);
+            } else if (selector === ":appHost") {
+              if (hostSet.$appHost) targetEls.push(hostSet.$appHost);
+            } else {
+              if (r === "shadow") {
+                const found = this.shadowRoot?.querySelectorAll(selector);
+                if (found) targetEls.push(...found);
+              } else if (r === "light") {
+                const found = this.querySelectorAll(selector);
+                if (found) targetEls.push(...found);
+              } else if (r === "all") {
+                const sFound = this.shadowRoot?.querySelectorAll(selector);
+                const lFound = this.querySelectorAll(selector);
+                if (sFound) targetEls.push(...sFound);
+                if (lFound) targetEls.push(...lFound);
+              } else {
+                const found = (this.shadowRoot || this).querySelectorAll(selector);
+                if (found) targetEls.push(...found);
+              }
+            }
+            targetEls.forEach((targetEl) => {
               if (action === "set") {
                 targetEl.style.cssText = "";
                 if (typeof res === "object" && res !== null) {
@@ -6545,16 +6665,19 @@ var dooboostoreSimpleWebComponent = (() => {
                 const props = Array.isArray(res) ? res : [res];
                 props.forEach((p) => targetEl.style.removeProperty(String(p)));
               }
-            }
+            });
           }
           return res;
         };
       };
     };
   }
-  var setStyle = createStyleDecorator("set");
-  var updateStyle = createStyleDecorator("update");
-  var removeStyle = createStyleDecorator("remove");
+  var setStyle = (selector, options = {}) => createStyleDecorator("set")(selector, options);
+  var setStyleHost = (options = {}) => createStyleDecorator("set")(":host", options);
+  var updateStyle = (selector, options = {}) => createStyleDecorator("update")(selector, options);
+  var updateStyleHost = (options = {}) => createStyleDecorator("update")(":host", options);
+  var removeStyle = (selector, options = {}) => createStyleDecorator("remove")(selector, options);
+  var removeStyleHost = (options = {}) => createStyleDecorator("remove")(":host", options);
   var findAllStyleMetadata = (target) => {
     const result = /* @__PURE__ */ new Map();
     const maps = ReflectUtils.findAllMetadata(STYLE_METADATA_KEY, target);
@@ -6684,9 +6807,6 @@ var dooboostoreSimpleWebComponent = (() => {
     return (targetObj, propertyKey, descriptor) => {
       const constructor = targetObj.constructor;
       const fullOptions = { ...options, type };
-      if (!fullOptions.attributeName) {
-        fullOptions.attributeName = `swc-on-${type}`;
-      }
       if (fullOptions.bubbles === void 0) fullOptions.bubbles = true;
       if (fullOptions.composed === void 0) fullOptions.composed = true;
       let list = ReflectUtils.getMetadata(EMIT_CUSTOM_EVENT_METADATA_KEY, constructor);
@@ -6751,6 +6871,9 @@ var dooboostoreSimpleWebComponent = (() => {
     const constructor = target instanceof Function ? target : target.constructor;
     return ReflectUtils.getMetadata(EMIT_CUSTOM_EVENT_METADATA_KEY, constructor);
   };
+  function emitCustomEventHost(type, options) {
+    return emitCustomEvent(":host", type, options);
+  }
 
   // src/config/config.ts
   var HTML_TAG_ENTRIES = [
@@ -6871,6 +6994,10 @@ var dooboostoreSimpleWebComponent = (() => {
       inst.__swc_initialized = true;
       const hostSet = SwcUtils.getHostSet(inst);
       inst._executeSwcScript?.("swc-on-constructor", hostSet);
+      const cMethods = findAllLifecycleMetadata(inst, ON_CONSTRUCTOR_METADATA_KEY);
+      if (cMethods) {
+        for (const m of cMethods) inst._invokeLifecycleMethod(m, hostSet);
+      }
     }
   };
   var globalDelegatedRoots = /* @__PURE__ */ new WeakSet();
@@ -6969,7 +7096,9 @@ var dooboostoreSimpleWebComponent = (() => {
       const oldHandler = handlers.get(attrName);
       if (oldHandler) el.removeEventListener(eventName, oldHandler);
       const handler = async (event) => {
-        const hostSet = SwcUtils.getHostSet(el);
+        console.log("execute handler", event);
+        const parent = SwcUtils.findNearestSwcHost(el);
+        const hostSet = SwcUtils.getHostSet(parent || el);
         const conf = getElementConfig(this);
         const currentWin = this._resolveWindow(conf);
         const helpers = SwcUtils.getHelperSet(currentWin);
@@ -6988,13 +7117,18 @@ var dooboostoreSimpleWebComponent = (() => {
     };
     proto.__swc_executeAttributeEvent = async function(el, attrName, script, event) {
       ensureInit2(this);
-      const hostSet = SwcUtils.getHostSet(el);
+      console.log("execute handler2", event);
+      const parent = SwcUtils.findNearestSwcHost(el);
+      const hostSet = SwcUtils.getHostSet(parent || el);
       const conf = getElementConfig(this);
       const currentWin = this._resolveWindow(conf);
       const currentHelpers = SwcUtils.getHelperSet(currentWin);
+      const detail = event.detail;
       const args = {
         event,
-        $data: event.detail,
+        $event: event,
+        $data: detail,
+        $detail: detail,
         ...hostSet,
         ...currentHelpers,
         $el: el,
@@ -7021,12 +7155,14 @@ var dooboostoreSimpleWebComponent = (() => {
       metadata.extends = extendsTagName;
     }
     const emitCustomEventList = getEmitCustomEventMetadataList(constructor) || [];
+    const emitHostCustomEventList = emitCustomEventList.filter((meta) => meta.selector === ":host" || meta.selector === "");
     const addEventListenerList = getAddEventListenerMetadata(constructor) || [];
+    const addHostEventListenerList = addEventListenerList.filter((meta) => meta.selector === ":host" || meta.selector === "");
     const attrChangeMap = findAllAttributeChangedMetadata(constructor);
     const attributeList = findAllAttributeMetadata(constructor);
     const swcLifecycleAttributes = ["swc-on-constructor", "swc-on-connected", "swc-on-disconnected", "swc-on-before-connected", "swc-on-after-connected", "swc-on-before-disconnected", "swc-on-after-disconnected", "swc-on-before-adopted", "swc-on-after-adopted", "swc-on-attribute-changed"];
     const swcOnEvents = DOM_EVENT_NAMES.map((e) => `swc-on-${e}`);
-    const mergedObservedAttributes = [.../* @__PURE__ */ new Set([...metadata.observedAttributes ?? [], ...attrChangeMap.keys(), ...Array.from(findAllSetAttributeMetadata(constructor).values()).map((it) => it.name), ...attributeList.map((it) => it.options.name || String(it.propertyKey)), ...emitCustomEventList.map((it) => it.options.attributeName), ...swcLifecycleAttributes, ...swcOnEvents])];
+    const mergedObservedAttributes = [.../* @__PURE__ */ new Set([...metadata.observedAttributes ?? [], ...attrChangeMap.keys(), ...Array.from(findAllSetAttributeMetadata(constructor).values()).map((it) => it.name), ...attributeList.map((it) => it.options.name || String(it.propertyKey)), ...emitHostCustomEventList.map((it) => it.options.attributeName).filter(Boolean), ...swcLifecycleAttributes, ...swcOnEvents])];
     const connectedInnerHtmlList = getOnConnectedInnerHtmlMetadata(constructor) || [];
     const proto = constructor.prototype;
     setupPrototype(proto);
@@ -7046,25 +7182,15 @@ var dooboostoreSimpleWebComponent = (() => {
       }
       attributeList.forEach((meta) => {
         const attrName = meta.options.name || String(meta.propertyKey);
-        if (meta.options.connectedInitialize) {
-          const memoryVal = this[meta.privateKey];
-          if (memoryVal !== void 0) {
-            this.__swc_syncing_init = true;
-            try {
+        if (meta.options.connectedInitialize === true) {
+          this.__swc_syncing_init = true;
+          try {
+            const memoryVal = this[meta.privateKey];
+            if (memoryVal !== void 0) {
               this[meta.propertyKey] = memoryVal;
-            } finally {
-              this.__swc_syncing_init = false;
-            }
-          }
-        } else if (meta.selector === ":host" || !meta.selector) {
-          const domVal = this.getAttribute(attrName);
-          if (domVal !== null) {
-            this.__swc_syncing_init = true;
-            try {
-              this[meta.propertyKey] = domVal;
-            } finally {
-              this.__swc_syncing_init = false;
             }
+          } finally {
+            this.__swc_syncing_init = false;
           }
         }
       });
@@ -7087,7 +7213,62 @@ var dooboostoreSimpleWebComponent = (() => {
         });
         globalDelegatedRoots.add(root);
       }
+      const delegateListeners = [];
+      const nonDelegateListeners = [];
       addEventListenerList.forEach((meta) => {
+        if (meta.options.delegate && meta.selector !== ":window" && meta.selector !== ":document" && meta.selector !== ":parentHost" && meta.selector !== ":appHost" && meta.selector !== ":firstHost" && meta.selector !== ":lastHost" && meta.selector !== ":firstAppHost" && meta.selector !== ":lastAppHost" && meta.selector !== ":hosts" && meta.selector !== ":appHosts" && meta.selector !== ":host" && meta.selector !== "") {
+          delegateListeners.push(meta);
+        } else {
+          nonDelegateListeners.push(meta);
+        }
+      });
+      const delegatesByTypeAndRoot = /* @__PURE__ */ new Map();
+      delegateListeners.forEach((meta) => {
+        const r = meta.options.root || "auto";
+        const rootKey = `${meta.type}:${r}`;
+        if (!delegatesByTypeAndRoot.has(rootKey)) {
+          delegatesByTypeAndRoot.set(rootKey, []);
+        }
+        delegatesByTypeAndRoot.get(rootKey).push(meta);
+      });
+      delegatesByTypeAndRoot.forEach((metaList, typeRootKey) => {
+        const [type, rStr] = typeRootKey.split(":");
+        const r = rStr === "auto" ? "auto" : rStr;
+        const opts = { capture: metaList[0].options.capture, once: metaList[0].options.once, passive: metaList[0].options.passive };
+        const bindRoots = [];
+        if (r === "auto") bindRoots.push(this.shadowRoot || this);
+        else if (r === "light") bindRoots.push(this);
+        else if (r === "shadow" && this.shadowRoot) bindRoots.push(this.shadowRoot);
+        else if (r === "all") {
+          bindRoots.push(this);
+          if (this.shadowRoot) bindRoots.push(this.shadowRoot);
+        }
+        bindRoots.forEach((br) => {
+          const sortedMetaList = [...metaList].sort((a, b) => {
+            const aStop = a.options.stopPropagation ? 1 : 0;
+            const bStop = b.options.stopPropagation ? 1 : 0;
+            return bStop - aStop;
+          });
+          const unifiedHandler = async (event) => {
+            for (const meta of sortedMetaList) {
+              const { selector, options } = meta;
+              const matchedEl = event.target.closest(selector);
+              if (matchedEl && br.contains(matchedEl)) {
+                if (options.stopPropagation) event.stopPropagation();
+                if (options.stopImmediatePropagation) event.stopImmediatePropagation();
+                if (options.preventDefault) event.preventDefault();
+                const currentHostSet = SwcUtils.getHostSet(this);
+                const args = { event, ...currentHostSet, $el: matchedEl, $root: br };
+                await this[meta.propertyKey](event, currentHostSet, matchedEl, args);
+                if (event.cancelBubble) break;
+              }
+            }
+          };
+          br.addEventListener(type, unifiedHandler, opts);
+          this._boundListeners.push({ target: br, type, handler: unifiedHandler, options: opts });
+        });
+      });
+      nonDelegateListeners.forEach((meta) => {
         const { selector, type, options } = meta;
         const opts = { capture: options.capture, once: options.once, passive: options.passive };
         const bindTargets = [];
@@ -7112,33 +7293,7 @@ var dooboostoreSimpleWebComponent = (() => {
         else if (selector === ":hosts") hostSet.$hosts.forEach(applyRootOption);
         else if (selector === ":appHosts") hostSet.$appHosts.forEach(applyRootOption);
         else if (selector === ":host" || !selector) applyRootOption(this);
-        else if (options.delegate) {
-          const bindRoots = [];
-          if (r === "auto") bindRoots.push(this.shadowRoot || this);
-          else if (r === "light") bindRoots.push(this);
-          else if (r === "shadow" && this.shadowRoot) bindRoots.push(this.shadowRoot);
-          else if (r === "all") {
-            bindRoots.push(this);
-            if (this.shadowRoot) bindRoots.push(this.shadowRoot);
-          }
-          bindRoots.forEach((br) => {
-            const handler = async (event) => {
-              const matchedEl = event.target.closest(selector);
-              if (matchedEl && br.contains(matchedEl)) {
-                if (options.stopPropagation) event.stopPropagation();
-                if (options.stopImmediatePropagation) event.stopImmediatePropagation();
-                if (options.preventDefault) event.preventDefault();
-                const currentHostSet = SwcUtils.getHostSet(this);
-                const args = { event, ...currentHostSet, $el: matchedEl, $root: br };
-                await this._invokeLifecycleMethod(meta.propertyKey, currentHostSet, [event, currentHostSet, matchedEl, args]);
-              }
-            };
-            br.addEventListener(type, handler, opts);
-            if (options.removeOnDisconnected === true || br !== this && br !== this.shadowRoot) {
-              this._boundListeners.push({ target: br, type, handler, options: opts });
-            }
-          });
-        } else {
+        else {
           const searchRoots = [];
           if (r === "auto") searchRoots.push(this.shadowRoot || this);
           else if (r === "light") searchRoots.push(this);
@@ -7158,7 +7313,7 @@ var dooboostoreSimpleWebComponent = (() => {
             if (options.preventDefault) event.preventDefault();
             const currentHostSet = SwcUtils.getHostSet(this);
             const args = { event, ...currentHostSet, $el: t, $root: t };
-            await this._invokeLifecycleMethod(meta.propertyKey, currentHostSet, [event, currentHostSet, args]);
+            await this[meta.propertyKey](event, currentHostSet, args);
           };
           t.addEventListener(type, handler, opts);
           if (options.removeOnDisconnected === true || t === currentWin || t === currentWin.document) {
@@ -7166,6 +7321,22 @@ var dooboostoreSimpleWebComponent = (() => {
           }
         });
       });
+      addHostEventListenerList.forEach((meta) => {
+        const { type, options } = meta;
+        const opts = { capture: options.capture, once: options.once, passive: options.passive };
+        const handler = async (event) => {
+          if (options.stopPropagation) event.stopPropagation();
+          if (options.stopImmediatePropagation) event.stopImmediatePropagation();
+          if (options.preventDefault) event.preventDefault();
+          const currentHostSet = SwcUtils.getHostSet(this);
+          const args = { event, ...currentHostSet, $el: this, $root: this.getRootNode() };
+          await this[meta.propertyKey](event, currentHostSet, args);
+        };
+        this.addEventListener(type, handler, opts);
+        if (options.removeOnDisconnected === true) {
+          this._boundListeners.push({ target: this, type, handler, options: opts });
+        }
+      });
       if (originalConnected) originalConnected.apply(this);
       const aMethods = findAllLifecycleMetadata(this, ON_AFTER_CONNECTED_METADATA_KEY);
       if (aMethods) {
@@ -7215,17 +7386,20 @@ var dooboostoreSimpleWebComponent = (() => {
     const originalAttributeChanged = proto.attributeChangedCallback;
     proto.attributeChangedCallback = function(name2, old, newVal) {
       if (originalAttributeChanged) originalAttributeChanged.apply(this, [name2, old, newVal]);
+      const hSet = SwcUtils.getHostSet(this);
       if (name2.startsWith("swc-on-") && !swcLifecycleAttributes.includes(name2)) {
         if (newVal !== null) {
-          const customEventMeta = emitCustomEventList.find((it) => it.options.attributeName === name2);
-          const eventName = customEventMeta ? customEventMeta.type : name2.substring(7);
+          const eventName = name2.substring(7);
           this._bindAttributeEvent(this, name2, newVal, eventName);
         }
       }
+      const hostCustomEventMeta = emitHostCustomEventList.find((it) => it.options.attributeName === name2);
+      if (hostCustomEventMeta && newVal !== null) {
+        this._bindAttributeEvent(this, name2, newVal, hostCustomEventMeta.type);
+      }
       const mKeys = attrChangeMap.get(name2);
       if (mKeys && Array.isArray(mKeys)) {
-        const hSet = SwcUtils.getHostSet(this);
-        for (const key of mKeys) this._invokeLifecycleMethod(key, hSet, [newVal, old, name2]);
+        for (const key of mKeys) this[key](newVal, old, name2, hSet);
       }
     };
     Object.defineProperty(constructor, "observedAttributes", {
@@ -8050,6 +8224,10 @@ var dooboostoreSimpleWebComponent = (() => {
       const raw = strings.reduce((acc, str, i) => acc + str + (values[i] !== void 0 ? values[i] : ""), "");
       return document.createTextNode(raw);
     };
+    TemplateUtils2.commentNode = (strings, ...values) => {
+      const raw = strings.reduce((acc, str, i) => acc + str + (values[i] !== void 0 ? values[i] : ""), "");
+      return document.createComment(raw);
+    };
     TemplateUtils2.createElement = (info, attrs = {}) => {
       const el = document.createElement(info.tagName);
       if (info.innerHtml !== void 0) el.innerHTML = info.innerHtml;
@@ -8082,6 +8260,7 @@ var dooboostoreSimpleWebComponent = (() => {
   })(TemplateUtils || (TemplateUtils = {}));
   var htmlFragment = TemplateUtils.htmlFragment;
   var textNode = TemplateUtils.textNode;
+  var commentNode = TemplateUtils.commentNode;
   var createElement = TemplateUtils.createElement;
   var htmlDivElement = TemplateUtils.htmlDivElement;
   var htmlSpanElement = TemplateUtils.htmlSpanElement;