@dooboostore/simple-web-component 1.0.22 → 1.0.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dooboostore/simple-web-component",
-  "version": "1.0.22",
+  "version": "1.0.23",
   "license": "MIT",
   "type": "module",
   "main": "./dist/cjs/index.js",
@@ -93,9 +93,9 @@
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^5.2.0",
     "@dooboostore/core-web": "1.0.10",
-    "@dooboostore/core": "1.0.30",
     "@dooboostore/core-node": "1.0.12",
-    "@dooboostore/simple-boot": "1.0.54"
+    "@dooboostore/simple-boot": "1.0.54",
+    "@dooboostore/core": "1.0.30"
   },
   "scripts": {
     "clean": "rm -rf dist",

package/src/decorators/applyNode.ts

@@ -1,10 +1,12 @@
 import { ReflectUtils } from '@dooboostore/core';
 import { ensureInit, getElementConfig } from './elementDefine';
+import { SwcRootType } from '../types';
 
-export type ApplyNodePosition = 'beforeBegin' | 'afterBegin' | 'beforeEnd' | 'afterEnd' | 'replace' | 'replaceChildren' | 'innerHtml' | 'innerText';
+export type ApplyNodePosition = 'beforeBegin' | 'afterBegin' | 'beforeEnd' | 'afterEnd' | 'replace' | 'replaceChildren' | 'innerHtml' | 'innerText' | 'remove';
 
 export interface ApplyNodeOptions {
   position?: ApplyNodePosition;
+  root?: SwcRootType;
 }
 
 export interface ApplyNodeMetadata {
@@ -31,6 +33,8 @@ const normalizeNodes = (res: any, doc: Document): Node[] => {
  *   @applyNode('#header', { position: 'afterBegin' }) prependItem() { return '<h1>Title</h1>'; }  // prepend at start
  *   @applyNode('#item', { position: 'replace' }) replaceItem() { return '<div>Replaced</div>'; }  // replace element
  *   @applyNode('#list', { position: 'replaceChildren' }) updateList() { return [item1, item2]; }  // replace all children
+ *   @applyNode('#notification', { position: 'remove' }) dismissNotification() { return shouldDismiss; }  // remove if truthy
+ *   @applyNode('.items', { position: 'remove', root: 'shadow' }) clearItems() { return true; }  // remove shadow DOM elements
  * 
  * Positions:
  *   - 'beforeEnd' (default): Append at end of target
@@ -41,6 +45,13 @@ const normalizeNodes = (res: any, doc: Document): Node[] => {
  *   - 'replaceChildren': Replace all children of target element
  *   - 'innerHtml': Set target's innerHTML
  *   - 'innerText': Set target's innerText
+ *   - 'remove': Remove target element if returned value is truthy
+ * 
+ * Root Options:
+ *   - 'auto' (default): Search shadow DOM first, then light DOM
+ *   - 'shadow': Search only in shadow DOM
+ *   - 'light': Search only in light DOM
+ *   - 'all': Use both (shadow preferred for query, both for remove)
  */
 export function applyNode(selector: string, options: ApplyNodeOptions = { position: 'beforeEnd' }): MethodDecorator {
   return (target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor) => {
@@ -61,43 +72,83 @@ export function applyNode(selector: string, options: ApplyNodeOptions = { positi
         const currentWin = (this as any)._resolveWindow?.(conf) || ((typeof window !== 'undefined' ? window : undefined) as Window);
         const currentDoc = currentWin.document;
 
-        let targetEl: HTMLElement | null = null;
-        if (selector === ':host' || !selector) {
-          targetEl = this as any;
-        } else {
-          targetEl = (this.shadowRoot || (this as any)).querySelector(selector);
-        }
+        const pos = options.position || 'beforeEnd';
+        const r = options.root || 'auto';
 
-        if (targetEl) {
-          const nodes = normalizeNodes(res, currentDoc);
-          const pos = options.position || 'beforeEnd';
-
-          if (pos === 'replace') {
-            // Replace the entire target element with new nodes
-            targetEl.replaceWith(...nodes);
-          } else if (pos === 'replaceChildren') {
-            // Replace all children of target element
-            targetEl.replaceChildren(...nodes);
-          } else if (pos === 'innerHtml') {
-            // Set innerHTML
-            targetEl.innerHTML = res !== undefined && res !== null ? String(res) : '';
-          } else if (pos === 'innerText') {
-            // Set innerText
-            targetEl.innerText = res !== undefined && res !== null ? String(res) : '';
+        const getTargetRoot = () => {
+          if (r === 'shadow') return this.shadowRoot;
+          if (r === 'light') return this as any;
+          if (r === 'all') return this.shadowRoot || (this as any);
+          return this.shadowRoot || (this as any); // auto
+        };
+
+        if (pos === 'remove') {
+          // Remove element(s) if returned value is truthy
+          if (res) {
+            if (selector === ':host' || !selector) {
+              if (r === 'shadow' && this.shadowRoot) {
+                // Remove all children from shadow DOM
+                this.shadowRoot.replaceChildren();
+              } else {
+                // Remove the component itself
+                (this as any).remove();
+              }
+            } else {
+              const targetRoot = getTargetRoot();
+              if (targetRoot) {
+                const targets = targetRoot.querySelectorAll(selector);
+                targets.forEach((el: Element) => el.remove());
+              }
+            }
+          }
+        } else {
+          let targetEl: any = null;
+          if (selector === ':host' || !selector) {
+            if (r === 'shadow') {
+              targetEl = this.shadowRoot;  // Target shadow DOM root
+            } else {
+              targetEl = this as any;  // Target the component itself
+            }
           } else {
-            /*
-                  <!-- beforebegin -->
-                  <p>
-                    <!-- afterbegin -->
-                    foo
-                    <!-- beforeend -->
-                  </p>
-                  <!-- afterend -->
-             */
-            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') {
+              // ShadowRoot doesn't support replaceWith
+              if (!isShadowRoot) {
+                targetEl.replaceWith(...nodes);
+              }
+            } else if (pos === 'replaceChildren') {
+              // Replace all children of target element
+              targetEl.replaceChildren(...nodes);
+            } else if (pos === 'innerHtml') {
+              // Set innerHTML
+              targetEl.innerHTML = res !== undefined && res !== null ? String(res) : '';
+            } else if (pos === 'innerText') {
+              // Set innerText
+              if (targetEl.innerText !== undefined) {
+                targetEl.innerText = res !== undefined && res !== null ? String(res) : '';
+              }
+            } else {
+              /*
+                    <!-- beforebegin -->
+                    <p>
+                      <!-- afterbegin -->
+                      foo
+                      <!-- beforeend -->
+                    </p>
+                    <!-- afterend -->
+               */
+              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);
+            }
           }
         }
       }
@@ -125,3 +176,115 @@ export const findAllApplyNodeMetadata = (target: any): Map<string | symbol, Appl
 export function applyNodeHost(options: ApplyNodeOptions = { position: 'beforeEnd' }): MethodDecorator {
   return applyNode(':host', options);
 }
+
+// Convenience decorators for specific positions
+
+/**
+ * @applyBeforeBeginNode - Insert before target element
+ */
+export const applyBeforeBeginNode = (selector: string, options: ApplyNodeOptions = {}) => 
+  applyNode(selector, { ...options, position: 'beforeBegin' });
+
+/**
+ * @applyAfterBeginNode - Prepend to target element
+ */
+export const applyAfterBeginNode = (selector: string, options: ApplyNodeOptions = {}) => 
+  applyNode(selector, { ...options, position: 'afterBegin' });
+
+/**
+ * @applyBeforeEndNode - Append to target element (default)
+ */
+export const applyBeforeEndNode = (selector: string, options: ApplyNodeOptions = {}) => 
+  applyNode(selector, { ...options, position: 'beforeEnd' });
+
+/**
+ * @applyAfterEndNode - Insert after target element
+ */
+export const applyAfterEndNode = (selector: string, options: ApplyNodeOptions = {}) => 
+  applyNode(selector, { ...options, position: 'afterEnd' });
+
+/**
+ * @applyReplaceNode - Replace entire target element
+ */
+export const applyReplaceNode = (selector: string, options: ApplyNodeOptions = {}) => 
+  applyNode(selector, { ...options, position: 'replace' });
+
+/**
+ * @applyReplaceChildrenNode - Replace all children of target element
+ */
+export const applyReplaceChildrenNode = (selector: string, options: ApplyNodeOptions = {}) => 
+  applyNode(selector, { ...options, position: 'replaceChildren' });
+
+/**
+ * @applyInnerHtmlNode - Set target's innerHTML
+ */
+export const applyInnerHtmlNode = (selector: string, options: ApplyNodeOptions = {}) => 
+  applyNode(selector, { ...options, position: 'innerHtml' });
+
+/**
+ * @applyInnerTextNode - Set target's innerText
+ */
+export const applyInnerTextNode = (selector: string, options: ApplyNodeOptions = {}) => 
+  applyNode(selector, { ...options, position: 'innerText' });
+
+/**
+ * @applyRemoveNode - Remove target element if truthy
+ */
+export const applyRemoveNode = (selector: string, options: ApplyNodeOptions = {}) => 
+  applyNode(selector, { ...options, position: 'remove' });
+
+// Host versions
+
+/**
+ * @applyBeforeBeginNodeHost - Insert before :host
+ */
+export const applyBeforeBeginNodeHost = (options: ApplyNodeOptions = {}) => 
+  applyNode(':host', { ...options, position: 'beforeBegin' });
+
+/**
+ * @applyAfterBeginNodeHost - Prepend to :host
+ */
+export const applyAfterBeginNodeHost = (options: ApplyNodeOptions = {}) => 
+  applyNode(':host', { ...options, position: 'afterBegin' });
+
+/**
+ * @applyBeforeEndNodeHost - Append to :host
+ */
+export const applyBeforeEndNodeHost = (options: ApplyNodeOptions = {}) => 
+  applyNode(':host', { ...options, position: 'beforeEnd' });
+
+/**
+ * @applyAfterEndNodeHost - Insert after :host
+ */
+export const applyAfterEndNodeHost = (options: ApplyNodeOptions = {}) => 
+  applyNode(':host', { ...options, position: 'afterEnd' });
+
+/**
+ * @applyReplaceNodeHost - Replace :host
+ */
+export const applyReplaceNodeHost = (options: ApplyNodeOptions = {}) => 
+  applyNode(':host', { ...options, position: 'replace' });
+
+/**
+ * @applyReplaceChildrenNodeHost - Replace children of :host
+ */
+export const applyReplaceChildrenNodeHost = (options: ApplyNodeOptions = {}) => 
+  applyNode(':host', { ...options, position: 'replaceChildren' });
+
+/**
+ * @applyInnerHtmlNodeHost - Set :host innerHTML
+ */
+export const applyInnerHtmlNodeHost = (options: ApplyNodeOptions = {}) => 
+  applyNode(':host', { ...options, position: 'innerHtml' });
+
+/**
+ * @applyInnerTextNodeHost - Set :host innerText
+ */
+export const applyInnerTextNodeHost = (options: ApplyNodeOptions = {}) => 
+  applyNode(':host', { ...options, position: 'innerText' });
+
+/**
+ * @applyRemoveNodeHost - Remove :host if truthy
+ */
+export const applyRemoveNodeHost = (options: ApplyNodeOptions = {}) => 
+  applyNode(':host', { ...options, position: 'remove' });

package/src/decorators/attribute.ts

@@ -143,7 +143,7 @@ export function attribute(selector: string, options: AttributeOptions = {}): Pro
       },
       set(this: any, nv: any) {
         const targetType = options.type || designType;
-        console.log('---set', propertyKey, targetType, nv, this, this.__swc_syncing_init);
+        // console.log('---set', propertyKey, targetType, nv, this, this.__swc_syncing_init);
 
         const attrName = options.name || String(propertyKey);
         const conf = getElementConfig(this);

package/src/decorators/classList.ts

@@ -1,6 +1,7 @@
 import { ReflectUtils } from '@dooboostore/core';
 import { ensureInit } from './elementDefine';
 import { SwcUtils } from '../utils/Utils';
+import { SwcQueryOptions } from '../types';
 
 export const CLASS_LIST_METADATA_KEY = Symbol('simple-web-component:class-list');
 
@@ -10,10 +11,11 @@ export interface ClassListMetadata {
   propertyKey: string | symbol;
   selector: string;
   action: ClassListAction;
+  options: SwcQueryOptions;
 }
 
 function createClassListDecorator(action: ClassListAction) {
-  return (selector: string): MethodDecorator => {
+  return (selector: string, options: SwcQueryOptions = {}): MethodDecorator => {
     return (target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor) => {
       const constructor = target.constructor;
       let metaList = ReflectUtils.getOwnMetadata(CLASS_LIST_METADATA_KEY, constructor) as Map<string | symbol, ClassListMetadata>;
@@ -21,22 +23,43 @@ function createClassListDecorator(action: ClassListAction) {
         metaList = new Map<string | symbol, ClassListMetadata>();
         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: any[]) {
         ensureInit(this);
         const res = await original.apply(this, args);
         if (res !== undefined) {
+          const r = options.root || 'auto';
           const hostSet = SwcUtils.getHostSet(this as any);
+          const targetEls: HTMLElement[] = [];
+
+          if (selector === ':host' || !selector) {
+            targetEls.push(this as any);
+          } 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 as any).querySelectorAll(selector);
+              if (found) targetEls.push(...found);
+            } else if (r === 'all') {
+              const sFound = this.shadowRoot?.querySelectorAll(selector);
+              const lFound = (this as any).querySelectorAll(selector);
+              if (sFound) targetEls.push(...sFound);
+              if (lFound) targetEls.push(...lFound);
+            } else {
+              // auto
+              const found = (this.shadowRoot || (this as any)).querySelectorAll(selector);
+              if (found) targetEls.push(...found);
+            }
+          }
 
-          let targetEl: HTMLElement | null = null;
-          if (selector === ':host' || !selector) targetEl = this as any;
-          else if (selector === ':parentHost') targetEl = hostSet.$parentHost;
-          else if (selector === ':appHost') targetEl = hostSet.$appHost;
-          else targetEl = (this.shadowRoot || (this as any)).querySelector(selector);
-
-          if (targetEl) {
+          targetEls.forEach(targetEl => {
             if (action === 'set') {
               let classes = '';
               if (typeof res === 'object' && res !== null && !Array.isArray(res)) {
@@ -51,7 +74,7 @@ function createClassListDecorator(action: ClassListAction) {
             } else if (action === 'update') {
               if (typeof res === 'object' && res !== null && !Array.isArray(res)) {
                 Object.entries(res).forEach(([cls, force]) => {
-                  targetEl!.classList.toggle(cls, !!force);
+                  targetEl.classList.toggle(cls, !!force);
                 });
               } else if (res !== undefined && res !== null) {
                 const classes = Array.isArray(res) ? res.map(String) : [String(res)];
@@ -65,9 +88,9 @@ function createClassListDecorator(action: ClassListAction) {
               targetEl.classList.remove(...classes);
             } else if (action === 'toggle') {
               const classes = Array.isArray(res) ? res.map(String) : [String(res)];
-              classes.forEach(c => targetEl!.classList.toggle(c));
+              classes.forEach(c => targetEl.classList.toggle(c));
             }
-          }
+          });
         }
         return res;
       };
@@ -79,31 +102,31 @@ function createClassListDecorator(action: ClassListAction) {
  * @setClassList decorator to surgically replace all classes on a target element.
  * Returns: string | string[]
  */
-export const setClassList = createClassListDecorator('set');
+export const setClassList = (selector: string, options: SwcQueryOptions = {}) => createClassListDecorator('set')(selector, options);
 
 /**
  * @updateClassList decorator to surgically update specific classes.
  * Returns: Record<string, boolean> (toggle with force) | string | string[] (add)
  */
-export const updateClassList = createClassListDecorator('update');
+export const updateClassList = (selector: string, options: SwcQueryOptions = {}) => createClassListDecorator('update')(selector, options);
 
 /**
  * @addClassList decorator to surgically add classes to a target element.
  * Returns: string | string[]
  */
-export const addClassList = createClassListDecorator('add');
+export const addClassList = (selector: string, options: SwcQueryOptions = {}) => createClassListDecorator('add')(selector, options);
 
 /**
  * @removeClassList decorator to surgically remove classes from a target element.
  * Returns: string | string[]
  */
-export const removeClassList = createClassListDecorator('remove');
+export const removeClassList = (selector: string, options: SwcQueryOptions = {}) => createClassListDecorator('remove')(selector, options);
 
 /**
  * @toggleClassList decorator to surgically toggle classes on a target element.
  * Returns: string | string[]
  */
-export const toggleClassList = createClassListDecorator('toggle');
+export const toggleClassList = (selector: string, options: SwcQueryOptions = {}) => createClassListDecorator('toggle')(selector, options);
 
 // Host-specific versions (for :host selector)
 
@@ -111,31 +134,31 @@ export const toggleClassList = createClassListDecorator('toggle');
  * @setClassListHost decorator to set classes on :host element.
  * Returns: string | string[]
  */
-export const setClassListHost = createClassListDecorator('set').bind(null, ':host');
+export const setClassListHost = (options: SwcQueryOptions = {}) => createClassListDecorator('set')(':host', options);
 
 /**
  * @updateClassListHost decorator to update specific classes on :host.
  * Returns: Record<string, boolean> (toggle with force) | string | string[] (add)
  */
-export const updateClassListHost = createClassListDecorator('update').bind(null, ':host');
+export const updateClassListHost = (options: SwcQueryOptions = {}) => createClassListDecorator('update')(':host', options);
 
 /**
  * @addClassListHost decorator to add classes to :host element.
  * Returns: string | string[]
  */
-export const addClassListHost = createClassListDecorator('add').bind(null, ':host');
+export const addClassListHost = (options: SwcQueryOptions = {}) => createClassListDecorator('add')(':host', options);
 
 /**
  * @removeClassListHost decorator to remove classes from :host element.
  * Returns: string | string[]
  */
-export const removeClassListHost = createClassListDecorator('remove').bind(null, ':host');
+export const removeClassListHost = (options: SwcQueryOptions = {}) => createClassListDecorator('remove')(':host', options);
 
 /**
  * @toggleClassListHost decorator to toggle classes on :host element.
  * Returns: string | string[]
  */
-export const toggleClassListHost = createClassListDecorator('toggle').bind(null, ':host');
+export const toggleClassListHost = (options: SwcQueryOptions = {}) => createClassListDecorator('toggle')(':host', options);
 
 export const findAllClassListMetadata = (target: any): Map<string | symbol, ClassListMetadata> => {
   const result = new Map<string | symbol, ClassListMetadata>();

package/src/decorators/elementDefine.ts

@@ -1,8 +1,7 @@
 import { ReflectUtils } from '@dooboostore/core';
 import { FunctionUtils } from '@dooboostore/core';
-import { getOnConnectedInnerHtmlMetadata } from './onConnectedInnerHtml';
 import { getAddEventListenerMetadata } from './addEventListener';
-import { ON_CONSTRUCTOR_METADATA_KEY, ON_BEFORE_CONNECTED_METADATA_KEY, ON_AFTER_CONNECTED_METADATA_KEY, ON_BEFORE_DISCONNECTED_METADATA_KEY, ON_AFTER_DISCONNECTED_METADATA_KEY, ON_BEFORE_ADOPTED_METADATA_KEY, ON_AFTER_ADOPTED_METADATA_KEY, findAllLifecycleMetadata } from './lifecycles';
+import { ON_CONSTRUCTOR_METADATA_KEY, ON_BEFORE_CONNECTED_METADATA_KEY, ON_AFTER_CONNECTED_METADATA_KEY, ON_BEFORE_DISCONNECTED_METADATA_KEY, ON_AFTER_DISCONNECTED_METADATA_KEY, ON_BEFORE_ADOPTED_METADATA_KEY, ON_AFTER_ADOPTED_METADATA_KEY, findAllLifecycleMetadata, getOnConnectedInnerHtmlMetadata } from './lifecycles';
 import { getEmitCustomEventMetadataList } from './emitCustomEvent';
 import { findAllAttributeChangedMetadata } from './changedAttributeHost';
 import { findAllSetAttributeMetadata } from './setAttribute';

package/src/decorators/index.ts

@@ -8,6 +8,5 @@ export * from './applyNode';
 export * from './lifecycles';
 export * from './query';
 export * from './queryAll';
-export * from './onConnectedInnerHtml';
 export * from './classList';
 export * from './style';

package/src/decorators/lifecycles.ts

@@ -10,9 +10,19 @@ export const ON_AFTER_DISCONNECTED_METADATA_KEY = Symbol('simple-web-component:o
 export const ON_BEFORE_ADOPTED_METADATA_KEY = Symbol('simple-web-component:on-before-adopted');
 export const ON_AFTER_ADOPTED_METADATA_KEY = Symbol('simple-web-component:on-after-adopted');
 export const ON_ADD_EVENT_LISTENER_METADATA_KEY = Symbol('simple-web-component:on-add-event-listener');
+export const INNER_HTML_METADATA_KEY = Symbol('simple-web-component:inner-html');
 
 export const ATTRIBUTE_CHANGED_WILDCARD = '*';
 
+export interface InnerHtmlOptions {
+  useShadow?: boolean;
+}
+
+export interface InnerHtmlMetadata {
+  propertyKey: string | symbol;
+  options: InnerHtmlOptions;
+}
+
 function createLifecycleDecorator(metadataKey: symbol): MethodDecorator {
   return (target: Object, propertyKey: string | symbol) => {
     const constructor = target.constructor;
@@ -40,6 +50,31 @@ export const onAdopted = onAfterAdopted;
 
 export const onAddEventListener = createLifecycleDecorator(ON_ADD_EVENT_LISTENER_METADATA_KEY);
 
+/**
+ * @onConnectedInnerHtml decorator to define the initial HTML content when connected.
+ */
+export function onConnectedInnerHtml(options: InnerHtmlOptions): MethodDecorator;
+export function onConnectedInnerHtml(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
+export function onConnectedInnerHtml(arg1?: InnerHtmlOptions | Object, arg2?: string | symbol, arg3?: PropertyDescriptor): MethodDecorator | void {
+  const decorator = (options: InnerHtmlOptions, target: Object, propertyKey: string | symbol) => {
+    const constructor = target.constructor;
+    let list = ReflectUtils.getMetadata<InnerHtmlMetadata[]>(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: Object, propertyKey: string | symbol) => {
+    decorator((arg1 as InnerHtmlOptions) || {}, target, propertyKey);
+  };
+}
+
 /**
  * 프로토타입 체인을 순회하며 모든 라이프사이클 메서드를 수집합니다.
  */
@@ -47,3 +82,8 @@ export const findAllLifecycleMetadata = <T = (string | symbol)[]>(target: any, m
   const results = ReflectUtils.findAllMetadataFlatten(metadataKey, target);
   return results.length > 0 ? (results as unknown as T) : undefined;
 };
+
+export const getOnConnectedInnerHtmlMetadata = (target: any): InnerHtmlMetadata[] | undefined => {
+  const constructor = target instanceof Function ? target : target.constructor;
+  return ReflectUtils.getMetadata(INNER_HTML_METADATA_KEY, constructor);
+};

package/src/decorators/query.ts

@@ -3,8 +3,6 @@ import { getElementConfig, ensureInit } from './elementDefine';
 import { SwcUtils } from '../utils/Utils';
 import { SpecialSelector, SwcQueryOptions } from '../types';
 
-export type QueryOptions = { root?: 'light' | 'shadow' | 'all' | 'auto' };
-
 export interface QueryMetadata {
   propertyKey: string | symbol;
   selector: string;