@dooboostore/simple-web-component 1.0.17 → 1.0.18

package/dist/types/decorators/appendChild.d.ts

@@ -0,0 +1,17 @@
+export type AppendChildPosition = 'firstChild' | 'lastChild' | 'nextSibling' | 'previousSibling';
+export interface AppendChildOptions {
+    position?: AppendChildPosition;
+}
+export interface AppendChildMetadata {
+    propertyKey: string | symbol;
+    selector: string;
+    options: AppendChildOptions;
+}
+export declare const APPEND_CHILD_METADATA_KEY: unique symbol;
+/**
+ * @appendChild decorator to surgically add nodes to a target element.
+ * Usage: @appendChild('#list') addItem() { return '<li>New Item</li>'; }
+ */
+export declare function appendChild(selector: string, options?: AppendChildOptions): MethodDecorator;
+export declare const findAllAppendChildMetadata: (target: any) => Map<string | symbol, AppendChildMetadata>;
+//# sourceMappingURL=appendChild.d.ts.map

package/dist/types/decorators/appendChild.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"appendChild.d.ts","sourceRoot":"","sources":["../../../src/decorators/appendChild.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,mBAAmB,GAAG,YAAY,GAAG,WAAW,GAAG,aAAa,GAAG,iBAAiB,CAAC;AAEjG,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,EAAE,mBAAmB,CAAC;CAChC;AAED,MAAM,WAAW,mBAAmB;IAClC,WAAW,EAAE,MAAM,GAAG,MAAM,CAAC;IAC7B,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,kBAAkB,CAAC;CAC7B;AAED,eAAO,MAAM,yBAAyB,eAA8C,CAAC;AAErF;;;GAGG;AACH,wBAAgB,WAAW,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,GAAE,kBAA8C,GAAG,eAAe,CAUtH;AAED,eAAO,MAAM,0BAA0B,GAAI,QAAQ,GAAG,KAAG,GAAG,CAAC,MAAM,GAAG,MAAM,EAAE,mBAAmB,CAShG,CAAC"}

package/dist/types/decorators/elementDefine.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"elementDefine.d.ts","sourceRoot":"","sources":["../../../src/decorators/elementDefine.ts"],"names":[],"mappings":"AAoBA,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,kBAAkB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC9B,qBAAqB,CAAC,EAAE,qBAAqB,CAAC;IAC9C,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,kBAAkB,eAAgD,CAAC;AAyBhF,eAAO,MAAM,aAAa,GACvB,UAAU,aAAa,GAAG,MAAM,KAAG,cAoYnC,CAAC;AAEJ,eAAO,MAAM,gBAAgB,GAAI,QAAQ,GAAG,KAAG,aAAa,GAAG,SAG9D,CAAC"}
+{"version":3,"file":"elementDefine.d.ts","sourceRoot":"","sources":["../../../src/decorators/elementDefine.ts"],"names":[],"mappings":"AAsBA,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,kBAAkB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC9B,qBAAqB,CAAC,EAAE,qBAAqB,CAAC;IAC9C,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,kBAAkB,eAAgD,CAAC;AAyBhF,eAAO,MAAM,aAAa,GACvB,UAAU,aAAa,GAAG,MAAM,KAAG,cAqdnC,CAAC;AAEJ,eAAO,MAAM,gBAAgB,GAAI,QAAQ,GAAG,KAAG,aAAa,GAAG,SAG9D,CAAC"}

package/dist/types/decorators/index.d.ts

@@ -3,7 +3,8 @@ export * from './elementDefine';
 export * from './changedAttribute';
 export * from './setAttribute';
 export * from './emitCustomEvent';
-export * from './innerHtml';
+export * from './replaceChildren';
+export * from './appendChild';
 export * from './lifecycles';
 export * from './query';
 export * from './queryAll';

package/dist/types/decorators/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/decorators/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/decorators/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC"}

package/dist/types/decorators/onConnectedInnerHtml.d.ts

@@ -0,0 +1,15 @@
+export interface InnerHtmlOptions {
+    useShadow?: boolean;
+}
+export interface InnerHtmlMetadata {
+    propertyKey: string | symbol;
+    options: InnerHtmlOptions;
+}
+export declare const INNER_HTML_METADATA_KEY: unique symbol;
+/**
+ * @onConnectedInnerHtml decorator to define the initial HTML content when connected.
+ */
+export declare function onConnectedInnerHtml(options: InnerHtmlOptions): MethodDecorator;
+export declare function onConnectedInnerHtml(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
+export declare const getOnConnectedInnerHtmlMetadata: (target: any) => InnerHtmlMetadata[] | undefined;
+//# sourceMappingURL=onConnectedInnerHtml.d.ts.map

package/dist/types/decorators/onConnectedInnerHtml.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"onConnectedInnerHtml.d.ts","sourceRoot":"","sources":["../../../src/decorators/onConnectedInnerHtml.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,gBAAgB;IAC/B,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,iBAAiB;IAChC,WAAW,EAAE,MAAM,GAAG,MAAM,CAAC;IAC7B,OAAO,EAAE,gBAAgB,CAAC;CAC3B;AAED,eAAO,MAAM,uBAAuB,eAA4C,CAAC;AAEjF;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,gBAAgB,GAAG,eAAe,CAAC;AACjF,wBAAgB,oBAAoB,CAAC,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,GAAG,MAAM,EAAE,UAAU,EAAE,kBAAkB,GAAG,IAAI,CAAC;AAqBzH,eAAO,MAAM,+BAA+B,GAAI,QAAQ,GAAG,KAAG,iBAAiB,EAAE,GAAG,SAGnF,CAAC"}

package/dist/types/decorators/query.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"query.d.ts","sourceRoot":"","sources":["../../../src/decorators/query.ts"],"names":[],"mappings":"AAIA,MAAM,WAAW,YAAY;IAC3B,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,MAAM,CAAC;CAC5C;AAED,MAAM,WAAW,aAAa;IAC5B,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,YAAY,CAAC;IACtB,WAAW,EAAE,MAAM,GAAG,MAAM,CAAC;CAC9B;AAED,eAAO,MAAM,kBAAkB,eAAuC,CAAC;AAEvE;;GAEG;AACH,wBAAgB,KAAK,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,GAAE,YAAiB,GAAG,iBAAiB,CAqDrF;AAED,eAAO,MAAM,gBAAgB,GAAI,QAAQ,GAAG,KAAG,aAAa,EAAE,GAAG,SAGhE,CAAC"}
+{"version":3,"file":"query.d.ts","sourceRoot":"","sources":["../../../src/decorators/query.ts"],"names":[],"mappings":"AAIA,MAAM,WAAW,YAAY;IAC3B,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,MAAM,CAAC;CAC5C;AAED,MAAM,WAAW,aAAa;IAC5B,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,YAAY,CAAC;IACtB,WAAW,EAAE,MAAM,GAAG,MAAM,CAAC;CAC9B;AAED,eAAO,MAAM,kBAAkB,eAAuC,CAAC;AAEvE;;GAEG;AACH,wBAAgB,KAAK,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,GAAE,YAAiB,GAAG,iBAAiB,CAiErF;AAED,eAAO,MAAM,gBAAgB,GAAI,QAAQ,GAAG,KAAG,aAAa,EAAE,GAAG,SAGhE,CAAC"}

package/dist/types/decorators/queryAll.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"queryAll.d.ts","sourceRoot":"","sources":["../../../src/decorators/queryAll.ts"],"names":[],"mappings":"AAIA,MAAM,WAAW,eAAe;IAC9B,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,MAAM,CAAC;CAC5C;AAED,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,eAAe,CAAC;IACzB,WAAW,EAAE,MAAM,GAAG,MAAM,CAAC;CAC9B;AAED,eAAO,MAAM,sBAAsB,eAA2C,CAAC;AAE/E;;GAEG;AACH,wBAAgB,QAAQ,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,GAAE,eAAoB,GAAG,iBAAiB,CAoD3F;AAED,eAAO,MAAM,mBAAmB,GAAI,QAAQ,GAAG,KAAG,gBAAgB,EAAE,GAAG,SAGtE,CAAC"}
+{"version":3,"file":"queryAll.d.ts","sourceRoot":"","sources":["../../../src/decorators/queryAll.ts"],"names":[],"mappings":"AAIA,MAAM,WAAW,eAAe;IAC9B,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,MAAM,CAAC;CAC5C;AAED,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,eAAe,CAAC;IACzB,WAAW,EAAE,MAAM,GAAG,MAAM,CAAC;CAC9B;AAED,eAAO,MAAM,sBAAsB,eAA2C,CAAC;AAE/E;;GAEG;AACH,wBAAgB,QAAQ,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,GAAE,eAAoB,GAAG,iBAAiB,CAoE3F;AAED,eAAO,MAAM,mBAAmB,GAAI,QAAQ,GAAG,KAAG,gBAAgB,EAAE,GAAG,SAGtE,CAAC"}

package/dist/types/decorators/replaceChildren.d.ts

@@ -0,0 +1,9 @@
+export declare const REPLACE_CHILDREN_METADATA_KEY: unique symbol;
+/**
+ * @replaceChildren decorator to surgically replace children of a target element.
+ * Usage: @replaceChildren('#container') renderPart() { return '<div>New Content</div>'; }
+ */
+export declare function replaceChildren(selector: string): MethodDecorator;
+export declare const getReplaceChildrenMetadata: (target: any) => Map<string | symbol, string> | undefined;
+export declare const findAllReplaceChildrenMetadata: (target: any) => Map<string | symbol, string>;
+//# sourceMappingURL=replaceChildren.d.ts.map

package/dist/types/decorators/replaceChildren.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"replaceChildren.d.ts","sourceRoot":"","sources":["../../../src/decorators/replaceChildren.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,6BAA6B,eAAkD,CAAC;AAE7F;;;GAGG;AACH,wBAAgB,eAAe,CAAC,QAAQ,EAAE,MAAM,GAAG,eAAe,CAUjE;AAED,eAAO,MAAM,0BAA0B,GAAI,QAAQ,GAAG,KAAG,GAAG,CAAC,MAAM,GAAG,MAAM,EAAE,MAAM,CAAC,GAAG,SAGvF,CAAC;AAEF,eAAO,MAAM,8BAA8B,GAAI,QAAQ,GAAG,KAAG,GAAG,CAAC,MAAM,GAAG,MAAM,EAAE,MAAM,CASvF,CAAC"}

package/dist/types/index.d.ts

@@ -2,7 +2,10 @@ import 'reflect-metadata';
 export * from './decorators/elementDefine';
 export * from './decorators/setAttribute';
 export * from './decorators/changedAttribute';
-export * from './decorators/innerHtml';
+export * from './decorators/onConnectedInnerHtml';
+export { onConnectedInnerHtml as innerHtml } from './decorators/onConnectedInnerHtml';
+export * from './decorators/replaceChildren';
+export * from './decorators/appendChild';
 export * from './decorators/emitCustomEvent';
 export * from './decorators/lifecycles';
 export * from './decorators/query';

package/dist/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,kBAAkB,CAAC;AAG1B,cAAc,4BAA4B,CAAC;AAC3C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,wBAAwB,CAAC;AACvC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,yBAAyB,CAAC;AACxC,cAAc,oBAAoB,CAAC;AACnC,cAAc,uBAAuB,CAAC;AACtC,cAAc,+BAA+B,CAAC;AAG9C,cAAc,SAAS,CAAC;AAGxB,cAAc,YAAY,CAAC;AAG3B,cAAc,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,kBAAkB,CAAC;AAG1B,cAAc,4BAA4B,CAAC;AAC3C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,mCAAmC,CAAC;AAClD,OAAO,EAAE,oBAAoB,IAAI,SAAS,EAAE,MAAM,mCAAmC,CAAC;AACtF,cAAc,8BAA8B,CAAC;AAC7C,cAAc,0BAA0B,CAAC;AACzC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,yBAAyB,CAAC;AACxC,cAAc,oBAAoB,CAAC;AACnC,cAAc,uBAAuB,CAAC;AACtC,cAAc,+BAA+B,CAAC;AAG9C,cAAc,SAAS,CAAC;AAGxB,cAAc,YAAY,CAAC;AAG3B,cAAc,eAAe,CAAC"}

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

@@ -1119,6 +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,
     ATTRIBUTE_CHANGED_WILDCARD: () => ATTRIBUTE_CHANGED_WILDCARD,
     ELEMENT_CONFIG_KEY: () => ELEMENT_CONFIG_KEY,
     EMIT_CUSTOM_EVENT_METADATA_KEY: () => EMIT_CUSTOM_EVENT_METADATA_KEY,
@@ -1134,6 +1135,7 @@ var dooboostoreSimpleWebComponent = (() => {
     ON_BEFORE_DISCONNECTED_METADATA_KEY: () => ON_BEFORE_DISCONNECTED_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,
     SWC_NOT_FOUND: () => SWC_NOT_FOUND,
     SwcApp: () => SwcApp,
@@ -1207,21 +1209,25 @@ var dooboostoreSimpleWebComponent = (() => {
     SwcUtils: () => SwcUtils,
     SwcWhen: () => SwcWhen,
     addEventListener: () => addEventListener,
+    appendChild: () => appendChild,
     changedAttribute: () => changedAttribute,
     elementDefine: () => elementDefine,
     emitCustomEvent: () => emitCustomEvent,
+    findAllAppendChildMetadata: () => findAllAppendChildMetadata,
     findAllAttributeChangedMetadata: () => findAllAttributeChangedMetadata,
     findAllLifecycleMetadata: () => findAllLifecycleMetadata,
+    findAllReplaceChildrenMetadata: () => findAllReplaceChildrenMetadata,
     findAllSetAttributeMetadata: () => findAllSetAttributeMetadata,
     getAddEventListenerMetadata: () => getAddEventListenerMetadata,
     getChangedAttributeMetadata: () => getChangedAttributeMetadata,
     getElementConfig: () => getElementConfig,
     getEmitCustomEventMetadataList: () => getEmitCustomEventMetadataList,
-    getInnerHtmlMetadataList: () => getInnerHtmlMetadataList,
+    getOnConnectedInnerHtmlMetadata: () => getOnConnectedInnerHtmlMetadata,
     getQueryAllMetadata: () => getQueryAllMetadata,
     getQueryMetadata: () => getQueryMetadata,
+    getReplaceChildrenMetadata: () => getReplaceChildrenMetadata,
     getSetAttributeMetadata: () => getSetAttributeMetadata,
-    innerHtml: () => innerHtml,
+    innerHtml: () => onConnectedInnerHtml,
     onAddEventListener: () => onAddEventListener,
     onAdopted: () => onAdopted,
     onAfterAdopted: () => onAfterAdopted,
@@ -1231,9 +1237,11 @@ var dooboostoreSimpleWebComponent = (() => {
     onBeforeConnected: () => onBeforeConnected,
     onBeforeDisconnected: () => onBeforeDisconnected,
     onConnected: () => onConnected,
+    onConnectedInnerHtml: () => onConnectedInnerHtml,
     onDisconnected: () => onDisconnected,
     query: () => query,
     queryAll: () => queryAll,
+    replaceChildren: () => replaceChildren,
     setAttribute: () => setAttribute
   });
   var import_reflect_metadata2 = __toESM(require_Reflect(), 1);
@@ -1378,9 +1386,9 @@ var dooboostoreSimpleWebComponent = (() => {
     };
   })(FunctionUtils || (FunctionUtils = {}));
 
-  // src/decorators/innerHtml.ts
+  // src/decorators/onConnectedInnerHtml.ts
   var INNER_HTML_METADATA_KEY = Symbol("simple-web-component:inner-html");
-  function innerHtml(arg1, arg2, arg3) {
+  function onConnectedInnerHtml(arg1, arg2, arg3) {
     const decorator = (options, target, propertyKey) => {
       const constructor = target.constructor;
       let list = ReflectUtils.getMetadata(INNER_HTML_METADATA_KEY, constructor);
@@ -1397,7 +1405,7 @@ var dooboostoreSimpleWebComponent = (() => {
       decorator(arg1 || {}, target, propertyKey);
     };
   }
-  var getInnerHtmlMetadataList = (target) => {
+  var getOnConnectedInnerHtmlMetadata = (target) => {
     const constructor = target instanceof Function ? target : target.constructor;
     return ReflectUtils.getMetadata(INNER_HTML_METADATA_KEY, constructor);
   };
@@ -1534,6 +1542,58 @@ 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) => {
+      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);
+    };
+  }
+  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");
+  function appendChild(selector, options = { position: "lastChild" }) {
+    return (target, propertyKey) => {
+      const constructor = target.constructor;
+      let meta = ReflectUtils.getOwnMetadata(APPEND_CHILD_METADATA_KEY, constructor);
+      if (!meta) {
+        meta = /* @__PURE__ */ new Map();
+        ReflectUtils.defineMetadata(APPEND_CHILD_METADATA_KEY, meta, constructor);
+      }
+      meta.set(propertyKey, { propertyKey, selector, options });
+    };
+  }
+  var findAllAppendChildMetadata = (target) => {
+    const result = /* @__PURE__ */ new Map();
+    const maps = ReflectUtils.findAllMetadata(APPEND_CHILD_METADATA_KEY, target);
+    maps.forEach((map) => {
+      if (map instanceof Map) {
+        map.forEach((v, k) => result.set(k, v));
+      }
+    });
+    return result;
+  };
+
   // src/utils/Utils.ts
   var SWC_NOT_FOUND = Symbol("SWC_NOT_FOUND");
   var SwcUtils;
@@ -1800,10 +1860,12 @@ var dooboostoreSimpleWebComponent = (() => {
     const addEventListenerList = getAddEventListenerMetadata(constructor) || [];
     const attrChangeMap = findAllAttributeChangedMetadata(constructor);
     const setAttrMap = findAllSetAttributeMetadata(constructor);
+    const replaceChildrenMap = findAllReplaceChildrenMetadata(constructor);
+    const appendChildMap = findAllAppendChildMetadata(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([...config.observedAttributes ?? [], ...attrChangeMap.keys(), ...setAttrMap.keys(), ...emitCustomEventList.map((it) => it.options.attributeName), ...swcLifecycleAttributes, ...swcOnEvents])];
-    const innerHtmlList = getInnerHtmlMetadataList(constructor) || [];
+    const connectedInnerHtmlList = getOnConnectedInnerHtmlMetadata(constructor) || [];
     const NewClass = class extends constructor {
       _executeSwcScript(attrName, hostSet, extraArgs = {}) {
         const script = this.getAttribute(attrName);
@@ -1870,7 +1932,7 @@ var dooboostoreSimpleWebComponent = (() => {
         this._boundListeners = [];
         const hostSet = SwcUtils.getHostSet(this);
         this._executeSwcScript("swc-on-constructor", hostSet);
-        if (innerHtmlList.some((it) => it.options.useShadow === true) && !this.shadowRoot) {
+        if (connectedInnerHtmlList.some((it) => it.options.useShadow === true) && !this.shadowRoot) {
           this.attachShadow({ mode: "open" });
         }
       }
@@ -1890,9 +1952,9 @@ var dooboostoreSimpleWebComponent = (() => {
         }
         if (typeof this.initCore === "function")
           this.initCore();
-        if (innerHtmlList.length > 0) {
+        if (connectedInnerHtmlList.length > 0) {
           let sContent = "", lContent = "";
-          for (const meta of innerHtmlList) {
+          for (const meta of connectedInnerHtmlList) {
             const res = await this[meta.propertyKey]();
             if (res !== void 0) {
               if (meta.options.useShadow)
@@ -1936,8 +1998,9 @@ var dooboostoreSimpleWebComponent = (() => {
           }
         };
         DOM_EVENT_NAMES.forEach((type) => {
-          this.addEventListener(type, createDelegationHandler(this));
-          this._boundListeners.push({ target: this, type, handler: createDelegationHandler(this) });
+          const handler = createDelegationHandler(this);
+          this.addEventListener(type, handler);
+          this._boundListeners.push({ target: this, type, handler });
         });
         const hasParentHost = SwcUtils.findAllSwcHosts(this).length > 0;
         if (!hasParentHost) {
@@ -2139,6 +2202,79 @@ var dooboostoreSimpleWebComponent = (() => {
         };
       }
     });
+    replaceChildrenMap.forEach((selector, methodName) => {
+      const original = NewClass.prototype[methodName];
+      if (typeof original === "function") {
+        NewClass.prototype[methodName] = function(...args) {
+          const res = original.apply(this, args);
+          if (res !== void 0) {
+            const conf = getElementConfig(this);
+            const currentWin = conf?.window || window;
+            const currentDoc = currentWin.document;
+            let targetEl = null;
+            if (selector === ":host" || !selector) {
+              targetEl = this;
+            } else {
+              targetEl = (this.shadowRoot || this).querySelector(selector);
+            }
+            if (targetEl) {
+              const nodes = Array.isArray(res) ? res : [res];
+              const normalizedNodes = nodes.map((n) => {
+                if (typeof n === "string") {
+                  const t = currentDoc.createElement("template");
+                  t.innerHTML = n;
+                  return t.content;
+                }
+                return n;
+              });
+              targetEl.replaceChildren(...normalizedNodes);
+            }
+          }
+          return res;
+        };
+      }
+    });
+    appendChildMap.forEach((meta, methodName) => {
+      const { selector, options } = meta;
+      const original = NewClass.prototype[methodName];
+      if (typeof original === "function") {
+        NewClass.prototype[methodName] = function(...args) {
+          const res = original.apply(this, args);
+          if (res !== void 0) {
+            const conf = getElementConfig(this);
+            const currentWin = conf?.window || window;
+            const currentDoc = currentWin.document;
+            let targetEl = null;
+            if (selector === ":host" || !selector) {
+              targetEl = this;
+            } else {
+              targetEl = (this.shadowRoot || this).querySelector(selector);
+            }
+            if (targetEl) {
+              const nodes = Array.isArray(res) ? res : [res];
+              const normalizedNodes = nodes.map((n) => {
+                if (typeof n === "string") {
+                  const t = currentDoc.createElement("template");
+                  t.innerHTML = n;
+                  return t.content;
+                }
+                return n;
+              });
+              const pos = options.position || "lastChild";
+              if (pos === "lastChild")
+                targetEl.append(...normalizedNodes);
+              else if (pos === "firstChild")
+                targetEl.prepend(...normalizedNodes);
+              else if (pos === "nextSibling")
+                targetEl.after(...normalizedNodes);
+              else if (pos === "previousSibling")
+                targetEl.before(...normalizedNodes);
+            }
+          }
+          return res;
+        };
+      }
+    });
     const originalProto = constructor.prototype;
     const newProto = NewClass.prototype;
     Object.getOwnPropertyNames(originalProto).forEach((name) => {
@@ -2210,6 +2346,22 @@ var dooboostoreSimpleWebComponent = (() => {
           }
           return (this.shadowRoot || this).querySelector(selector);
         },
+        set(nv) {
+          if (nv === null || nv === void 0) {
+            const r = options.root || "auto";
+            let targetEl = null;
+            if (r === "shadow")
+              targetEl = this.shadowRoot ? this.shadowRoot.querySelector(selector) : null;
+            else if (r === "light")
+              targetEl = this.querySelector(selector);
+            else if (r === "all")
+              targetEl = this.shadowRoot?.querySelector(selector) || this.querySelector(selector);
+            else
+              targetEl = (this.shadowRoot || this).querySelector(selector);
+            if (targetEl)
+              targetEl.remove();
+          }
+        },
         enumerable: true,
         configurable: true
       });
@@ -2265,6 +2417,24 @@ var dooboostoreSimpleWebComponent = (() => {
           const root = this.shadowRoot || this;
           return root.querySelectorAll(selector);
         },
+        set(nv) {
+          if (nv === null || nv === void 0 || Array.isArray(nv) && nv.length === 0) {
+            const r = options.root || "auto";
+            let targets = [];
+            if (r === "shadow")
+              targets = this.shadowRoot ? Array.from(this.shadowRoot.querySelectorAll(selector)) : [];
+            else if (r === "light")
+              targets = Array.from(this.querySelectorAll(selector));
+            else if (r === "all") {
+              const sNodes = this.shadowRoot ? Array.from(this.shadowRoot.querySelectorAll(selector)) : [];
+              const lNodes = Array.from(this.querySelectorAll(selector));
+              targets = [...sNodes, ...lNodes];
+            } else {
+              targets = Array.from((this.shadowRoot || this).querySelectorAll(selector));
+            }
+            targets.forEach((t) => t.remove());
+          }
+        },
         enumerable: true,
         configurable: true
       });