@dooboostore/simple-web-component 1.0.23 → 1.0.24

package/src/decorators/query.ts

@@ -108,10 +108,152 @@ export const getQueryMetadata = (target: any): QueryMetadata[] | undefined => {
 };
 
 /**
- * @hostQuery decorator - simplified version of @query for :host selector
- * Usage: @hostQuery()
- * Usage: @hostQuery({ root: 'shadow' })
+ * @queryHost decorator - simplified version of @query for :host selector
+ * Usage: @queryHost testzzs: HTMLElement | undefined;
+ * Usage: @queryHost() testzzs: HTMLElement | undefined;
+ * Usage: @queryHost({ root: 'shadow' }) testzzs: HTMLElement | undefined;
  */
-export function queryHost(options?: SwcQueryOptions): PropertyDecorator {
-  return query(':host', options);
+export function queryHost(target: Object, propertyKey: string | symbol): void;
+export function queryHost(): PropertyDecorator;
+export function queryHost(options: SwcQueryOptions): PropertyDecorator;
+export function queryHost(targetOrOptions?: any, propertyKey?: string | symbol): any {
+  // Direct decorator usage: @queryHost (no parentheses)
+  if (propertyKey !== undefined && (typeof propertyKey === 'string' || typeof propertyKey === 'symbol')) {
+    return query(':host', {})(targetOrOptions, propertyKey);
+  }
+
+  // @queryHost() or @queryHost(options)
+  if (typeof targetOrOptions === 'object' && targetOrOptions !== null) {
+    return query(':host', targetOrOptions as SwcQueryOptions);
+  } else {
+    return query(':host', {});
+  }
+}
+
+/**
+ * @host - Alias for @queryHost decorator
+ * Usage: @host element: HTMLElement | undefined;
+ * Usage: @host() element: HTMLElement | undefined;
+ * Usage: @host({ root: 'shadow' }) element: HTMLElement | undefined;
+ */
+export const host = queryHost;
+
+/**
+ * @parentHost - Query :parentHost (Direct parent SWC component)
+ * Usage: @parentHost parent: HTMLElement | undefined;
+ * Usage: @parentHost() parent: HTMLElement | undefined;
+ * Usage: @parentHost({ root: 'shadow' }) parent: HTMLElement | undefined;
+ */
+export function parentHost(target: Object, propertyKey: string | symbol): void;
+export function parentHost(): PropertyDecorator;
+export function parentHost(options: SwcQueryOptions): PropertyDecorator;
+export function parentHost(targetOrOptions?: any, propertyKey?: string | symbol): any {
+  if (propertyKey !== undefined && (typeof propertyKey === 'string' || typeof propertyKey === 'symbol')) {
+    return query(':parentHost', {})(targetOrOptions, propertyKey);
+  }
+  if (typeof targetOrOptions === 'object' && targetOrOptions !== null) {
+    return query(':parentHost', targetOrOptions as SwcQueryOptions);
+  } else {
+    return query(':parentHost', {});
+  }
+}
+
+/**
+ * @appHost - Query :appHost (Nearest <swc-app>)
+ * Usage: @appHost app: SwcAppInterface | undefined;
+ * Usage: @appHost() app: SwcAppInterface | undefined;
+ * Usage: @appHost({ root: 'shadow' }) app: SwcAppInterface | undefined;
+ */
+export function appHost(target: Object, propertyKey: string | symbol): void;
+export function appHost(): PropertyDecorator;
+export function appHost(options: SwcQueryOptions): PropertyDecorator;
+export function appHost(targetOrOptions?: any, propertyKey?: string | symbol): any {
+  if (propertyKey !== undefined && (typeof propertyKey === 'string' || typeof propertyKey === 'symbol')) {
+    return query(':appHost', {})(targetOrOptions, propertyKey);
+  }
+  if (typeof targetOrOptions === 'object' && targetOrOptions !== null) {
+    return query(':appHost', targetOrOptions as SwcQueryOptions);
+  } else {
+    return query(':appHost', {});
+  }
+}
+
+/**
+ * @firstHost - Query :firstHost (First component in hierarchy)
+ * Usage: @firstHost first: HTMLElement | undefined;
+ * Usage: @firstHost() first: HTMLElement | undefined;
+ * Usage: @firstHost({ root: 'shadow' }) first: HTMLElement | undefined;
+ */
+export function firstHost(target: Object, propertyKey: string | symbol): void;
+export function firstHost(): PropertyDecorator;
+export function firstHost(options: SwcQueryOptions): PropertyDecorator;
+export function firstHost(targetOrOptions?: any, propertyKey?: string | symbol): any {
+  if (propertyKey !== undefined && (typeof propertyKey === 'string' || typeof propertyKey === 'symbol')) {
+    return query(':firstHost', {})(targetOrOptions, propertyKey);
+  }
+  if (typeof targetOrOptions === 'object' && targetOrOptions !== null) {
+    return query(':firstHost', targetOrOptions as SwcQueryOptions);
+  } else {
+    return query(':firstHost', {});
+  }
+}
+
+/**
+ * @lastHost - Query :lastHost (Last component in hierarchy)
+ * Usage: @lastHost last: HTMLElement | undefined;
+ * Usage: @lastHost() last: HTMLElement | undefined;
+ * Usage: @lastHost({ root: 'shadow' }) last: HTMLElement | undefined;
+ */
+export function lastHost(target: Object, propertyKey: string | symbol): void;
+export function lastHost(): PropertyDecorator;
+export function lastHost(options: SwcQueryOptions): PropertyDecorator;
+export function lastHost(targetOrOptions?: any, propertyKey?: string | symbol): any {
+  if (propertyKey !== undefined && (typeof propertyKey === 'string' || typeof propertyKey === 'symbol')) {
+    return query(':lastHost', {})(targetOrOptions, propertyKey);
+  }
+  if (typeof targetOrOptions === 'object' && targetOrOptions !== null) {
+    return query(':lastHost', targetOrOptions as SwcQueryOptions);
+  } else {
+    return query(':lastHost', {});
+  }
+}
+
+/**
+ * @firstAppHost - Query :firstAppHost (First <swc-app> in hierarchy)
+ * Usage: @firstAppHost app: SwcAppInterface | undefined;
+ * Usage: @firstAppHost() app: SwcAppInterface | undefined;
+ * Usage: @firstAppHost({ root: 'shadow' }) app: SwcAppInterface | undefined;
+ */
+export function firstAppHost(target: Object, propertyKey: string | symbol): void;
+export function firstAppHost(): PropertyDecorator;
+export function firstAppHost(options: SwcQueryOptions): PropertyDecorator;
+export function firstAppHost(targetOrOptions?: any, propertyKey?: string | symbol): any {
+  if (propertyKey !== undefined && (typeof propertyKey === 'string' || typeof propertyKey === 'symbol')) {
+    return query(':firstAppHost', {})(targetOrOptions, propertyKey);
+  }
+  if (typeof targetOrOptions === 'object' && targetOrOptions !== null) {
+    return query(':firstAppHost', targetOrOptions as SwcQueryOptions);
+  } else {
+    return query(':firstAppHost', {});
+  }
+}
+
+/**
+ * @lastAppHost - Query :lastAppHost (Last <swc-app> in hierarchy)
+ * Usage: @lastAppHost app: SwcAppInterface | undefined;
+ * Usage: @lastAppHost() app: SwcAppInterface | undefined;
+ * Usage: @lastAppHost({ root: 'shadow' }) app: SwcAppInterface | undefined;
+ */
+export function lastAppHost(target: Object, propertyKey: string | symbol): void;
+export function lastAppHost(): PropertyDecorator;
+export function lastAppHost(options: SwcQueryOptions): PropertyDecorator;
+export function lastAppHost(targetOrOptions?: any, propertyKey?: string | symbol): any {
+  if (propertyKey !== undefined && (typeof propertyKey === 'string' || typeof propertyKey === 'symbol')) {
+    return query(':lastAppHost', {})(targetOrOptions, propertyKey);
+  }
+  if (typeof targetOrOptions === 'object' && targetOrOptions !== null) {
+    return query(':lastAppHost', targetOrOptions as SwcQueryOptions);
+  } else {
+    return query(':lastAppHost', {});
+  }
 }

package/src/decorators/queryAll.ts

@@ -113,6 +113,152 @@ export const getQueryAllMetadata = (target: any): QueryAllMetadata[] | undefined
  * Usage: @hostQueryAll()
  * Usage: @hostQueryAll({ root: 'shadow' })
  */
-export function queryAllHost(options?: SwcQueryOptions): PropertyDecorator {
-  return queryAll(':host', options);
+/**
+ * @queryAllHost decorator - simplified version of @queryAll for :host selector
+ * Usage: @queryAllHost items: HTMLElement[];
+ * Usage: @queryAllHost() items: HTMLElement[];
+ * Usage: @queryAllHost({ root: 'shadow' }) items: HTMLElement[];
+ */
+export function queryAllHost(target: Object, propertyKey: string | symbol): void;
+export function queryAllHost(): PropertyDecorator;
+export function queryAllHost(options: SwcQueryOptions): PropertyDecorator;
+export function queryAllHost(targetOrOptions?: any, propertyKey?: string | symbol): any {
+  // Direct decorator usage: @queryAllHost (no parentheses)
+  if (propertyKey !== undefined && (typeof propertyKey === 'string' || typeof propertyKey === 'symbol')) {
+    return queryAll(':host', {})(targetOrOptions, propertyKey);
+  }
+
+  // @queryAllHost() or @queryAllHost(options)
+  if (typeof targetOrOptions === 'object' && targetOrOptions !== null) {
+    return queryAll(':host', targetOrOptions as SwcQueryOptions);
+  } else {
+    return queryAll(':host', {});
+  }
+}
+
+/**
+ * @allHost - Alias for @queryAllHost decorator
+ * Usage: @allHost items: HTMLElement[];
+ * Usage: @allHost() items: HTMLElement[];
+ * Usage: @allHost({ root: 'shadow' }) items: HTMLElement[];
+ */
+export const allHost = queryAllHost;
+/**
+ * @allParentHost - Query all :parentHost (All parent SWC components)
+ * Usage: @allParentHost parents: HTMLElement[];
+ * Usage: @allParentHost() parents: HTMLElement[];
+ * Usage: @allParentHost({ root: 'shadow' }) parents: HTMLElement[];
+ */
+export function allParentHost(target: Object, propertyKey: string | symbol): void;
+export function allParentHost(): PropertyDecorator;
+export function allParentHost(options: SwcQueryOptions): PropertyDecorator;
+export function allParentHost(targetOrOptions?: any, propertyKey?: string | symbol): any {
+  if (propertyKey !== undefined && (typeof propertyKey === 'string' || typeof propertyKey === 'symbol')) {
+    return queryAll(':parentHost', {})(targetOrOptions, propertyKey);
+  }
+  if (typeof targetOrOptions === 'object' && targetOrOptions !== null) {
+    return queryAll(':parentHost', targetOrOptions as SwcQueryOptions);
+  } else {
+    return queryAll(':parentHost', {});
+  }
+}
+
+/**
+ * @allAppHost - Query all :appHost (All <swc-app> instances)
+ * Usage: @allAppHost apps: SwcAppInterface[];
+ * Usage: @allAppHost() apps: SwcAppInterface[];
+ * Usage: @allAppHost({ root: 'shadow' }) apps: SwcAppInterface[];
+ */
+export function allAppHost(target: Object, propertyKey: string | symbol): void;
+export function allAppHost(): PropertyDecorator;
+export function allAppHost(options: SwcQueryOptions): PropertyDecorator;
+export function allAppHost(targetOrOptions?: any, propertyKey?: string | symbol): any {
+  if (propertyKey !== undefined && (typeof propertyKey === 'string' || typeof propertyKey === 'symbol')) {
+    return queryAll(':appHost', {})(targetOrOptions, propertyKey);
+  }
+  if (typeof targetOrOptions === 'object' && targetOrOptions !== null) {
+    return queryAll(':appHost', targetOrOptions as SwcQueryOptions);
+  } else {
+    return queryAll(':appHost', {});
+  }
+}
+
+/**
+ * @allFirstHost - Query all :firstHost (All first components in hierarchy)
+ * Usage: @allFirstHost firsts: HTMLElement[];
+ * Usage: @allFirstHost() firsts: HTMLElement[];
+ * Usage: @allFirstHost({ root: 'shadow' }) firsts: HTMLElement[];
+ */
+export function allFirstHost(target: Object, propertyKey: string | symbol): void;
+export function allFirstHost(): PropertyDecorator;
+export function allFirstHost(options: SwcQueryOptions): PropertyDecorator;
+export function allFirstHost(targetOrOptions?: any, propertyKey?: string | symbol): any {
+  if (propertyKey !== undefined && (typeof propertyKey === 'string' || typeof propertyKey === 'symbol')) {
+    return queryAll(':firstHost', {})(targetOrOptions, propertyKey);
+  }
+  if (typeof targetOrOptions === 'object' && targetOrOptions !== null) {
+    return queryAll(':firstHost', targetOrOptions as SwcQueryOptions);
+  } else {
+    return queryAll(':firstHost', {});
+  }
+}
+
+/**
+ * @allLastHost - Query all :lastHost (All last components in hierarchy)
+ * Usage: @allLastHost lasts: HTMLElement[];
+ * Usage: @allLastHost() lasts: HTMLElement[];
+ * Usage: @allLastHost({ root: 'shadow' }) lasts: HTMLElement[];
+ */
+export function allLastHost(target: Object, propertyKey: string | symbol): void;
+export function allLastHost(): PropertyDecorator;
+export function allLastHost(options: SwcQueryOptions): PropertyDecorator;
+export function allLastHost(targetOrOptions?: any, propertyKey?: string | symbol): any {
+  if (propertyKey !== undefined && (typeof propertyKey === 'string' || typeof propertyKey === 'symbol')) {
+    return queryAll(':lastHost', {})(targetOrOptions, propertyKey);
+  }
+  if (typeof targetOrOptions === 'object' && targetOrOptions !== null) {
+    return queryAll(':lastHost', targetOrOptions as SwcQueryOptions);
+  } else {
+    return queryAll(':lastHost', {});
+  }
 }
+
+/**
+ * @allFirstAppHost - Query all :firstAppHost (All first <swc-app> in hierarchy)
+ * Usage: @allFirstAppHost apps: SwcAppInterface[];
+ * Usage: @allFirstAppHost() apps: SwcAppInterface[];
+ * Usage: @allFirstAppHost({ root: 'shadow' }) apps: SwcAppInterface[];
+ */
+export function allFirstAppHost(target: Object, propertyKey: string | symbol): void;
+export function allFirstAppHost(): PropertyDecorator;
+export function allFirstAppHost(options: SwcQueryOptions): PropertyDecorator;
+export function allFirstAppHost(targetOrOptions?: any, propertyKey?: string | symbol): any {
+  if (propertyKey !== undefined && (typeof propertyKey === 'string' || typeof propertyKey === 'symbol')) {
+    return queryAll(':firstAppHost', {})(targetOrOptions, propertyKey);
+  }
+  if (typeof targetOrOptions === 'object' && targetOrOptions !== null) {
+    return queryAll(':firstAppHost', targetOrOptions as SwcQueryOptions);
+  } else {
+    return queryAll(':firstAppHost', {});
+  }
+}
+
+/**
+ * @allLastAppHost - Query all :lastAppHost (All last <swc-app> in hierarchy)
+ * Usage: @allLastAppHost apps: SwcAppInterface[];
+ * Usage: @allLastAppHost() apps: SwcAppInterface[];
+ * Usage: @allLastAppHost({ root: 'shadow' }) apps: SwcAppInterface[];
+ */
+export function allLastAppHost(target: Object, propertyKey: string | symbol): void;
+export function allLastAppHost(): PropertyDecorator;
+export function allLastAppHost(options: SwcQueryOptions): PropertyDecorator;
+export function allLastAppHost(targetOrOptions?: any, propertyKey?: string | symbol): any {
+  if (propertyKey !== undefined && (typeof propertyKey === 'string' || typeof propertyKey === 'symbol')) {
+    return queryAll(':lastAppHost', {})(targetOrOptions, propertyKey);
+  }
+  if (typeof targetOrOptions === 'object' && targetOrOptions !== null) {
+    return queryAll(':lastAppHost', targetOrOptions as SwcQueryOptions);
+  } else {
+    return queryAll(':lastAppHost', {});
+  }
+}

package/src/decorators/setAttribute.ts

@@ -44,11 +44,12 @@ export function setAttribute(selector: string, name: string, options: SwcQueryOp
         const applyRoot = (t: any) => {
           if (!t) return;
           if (r === 'auto') {
-            targetEls.push((t as any).shadowRoot || t);
-            return;
+            // Attributes belong to the ELEMENT, not the ShadowRoot.
+            targetEls.push(t);
+          } else {
+            if (r === 'light' || r === 'all') targetEls.push(t);
+            if ((r === 'shadow' || r === 'all') && (t as any).shadowRoot) targetEls.push((t as any).shadowRoot);
           }
-          if (r === 'light' || r === 'all') targetEls.push(t);
-          if ((r === 'shadow' || r === 'all') && (t as any).shadowRoot) targetEls.push((t as any).shadowRoot);
         };
 
         if (selector === ':window') targetEls.push(currentWin);
@@ -81,7 +82,7 @@ export function setAttribute(selector: string, name: string, options: SwcQueryOp
           if (!targetEl || typeof (targetEl as any).setAttribute !== 'function') return;
           if (res === null) (targetEl as any).removeAttribute(name);
           else (targetEl as any).setAttribute(name, String(res));
-        })
+        });
       }
       return res;
     };

package/src/decorators/style.ts

@@ -5,8 +5,7 @@ import { SwcQueryOptions } from '../types';
 
 export type StyleAction = 'set' | 'update' | 'remove';
 
-export interface StyleOptions extends SwcQueryOptions {
-}
+export interface StyleOptions extends SwcQueryOptions {}
 
 export interface StyleMetadata {
   propertyKey: string | symbol;
@@ -37,28 +36,44 @@ function createStyleDecorator(action: StyleAction) {
           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 {
+          const applyRoot = (t: any) => {
+            if (!t || !(t instanceof HTMLElement)) return;
+            if (r === 'auto') {
+              // Styles belong to the ELEMENT, not the ShadowRoot.
+              targetEls.push(t);
+            } else {
+              if (r === 'light' || r === 'all') targetEls.push(t);
+              if ((r === 'shadow' || r === 'all') && t.shadowRoot) {
+                // ShadowRoot doesn't have a style property, so we skip it.
+              }
+            }
+          };
+
+          if (selector === ':parentHost') applyRoot(hostSet.$parentHost);
+          else if (selector === ':appHost') applyRoot(hostSet.$appHost);
+          else if (selector === ':firstHost') applyRoot(hostSet.$firstHost);
+          else if (selector === ':lastHost') applyRoot(hostSet.$lastHost);
+          else if (selector === ':firstAppHost') applyRoot(hostSet.$firstAppHost);
+          else if (selector === ':lastAppHost') applyRoot(hostSet.$lastAppHost);
+          else if (selector === ':hosts') hostSet.$hosts.forEach(applyRoot);
+          else if (selector === ':appHosts') hostSet.$appHosts.forEach(applyRoot);
+          else if (selector === ':host' || !selector) applyRoot(this);
+          else {
             if (r === 'shadow') {
               const found = this.shadowRoot?.querySelectorAll(selector);
-              if (found) targetEls.push(...found);
+              if (found) targetEls.push(...(Array.from(found) as HTMLElement[]));
             } else if (r === 'light') {
               const found = (this as any).querySelectorAll(selector);
-              if (found) targetEls.push(...found);
+              if (found) targetEls.push(...(Array.from(found) as HTMLElement[]));
             } 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);
+              if (sFound) targetEls.push(...(Array.from(sFound) as HTMLElement[]));
+              if (lFound) targetEls.push(...(Array.from(lFound) as HTMLElement[]));
             } else {
               // auto
               const found = (this.shadowRoot || (this as any)).querySelectorAll(selector);
-              if (found) targetEls.push(...found);
+              if (found) targetEls.push(...(Array.from(found) as HTMLElement[]));
             }
           }
 
@@ -95,10 +110,20 @@ export const setStyle = (selector: string, options: StyleOptions = {}) => create
 
 /**
  * @setStyleHost decorator - simplified version of @setStyle for :host selector.
- * Usage: @setStyleHost getStyles() { return { color: 'red', display: 'block' }; }
- * Usage: @setStyleHost({ root: 'shadow' }) getStyles() { return { color: 'red' }; }
+ * Usage: @setStyleHost setHostStyle() { return { color: 'red' }; }
+ * Usage: @setStyleHost() setHostStyle() { return { color: 'red' }; }
+ * Usage: @setStyleHost({ ... }) setHostStyle() { return { color: 'red' }; }
  */
-export const setStyleHost = (options: StyleOptions = {}) => createStyleDecorator('set')(':host', options);
+export function setStyleHost(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): any;
+export function setStyleHost(): MethodDecorator;
+export function setStyleHost(options: StyleOptions): MethodDecorator;
+export function setStyleHost(targetOrOptions?: any, propertyKey?: string | symbol, descriptor?: PropertyDescriptor): any {
+  if (propertyKey !== undefined) {
+    const decorator = createStyleDecorator('set')(':host', {});
+    return decorator(targetOrOptions, propertyKey, descriptor);
+  }
+  return createStyleDecorator('set')(':host', (targetOrOptions as StyleOptions) || {});
+}
 
 /**
  * @updateStyle decorator to surgically update styles on a target element (merges with existing styles).
@@ -110,9 +135,19 @@ export const updateStyle = (selector: string, options: StyleOptions = {}) => cre
 /**
  * @updateStyleHost decorator - simplified version of @updateStyle for :host selector.
  * Usage: @updateStyleHost updateStyles() { return { color: 'blue' }; }
- * Usage: @updateStyleHost({ root: 'shadow' }) updateStyles() { return { color: 'blue' }; }
+ * Usage: @updateStyleHost() updateStyles() { return { color: 'blue' }; }
+ * Usage: @updateStyleHost({ ... }) updateStyles() { return { color: 'blue' }; }
  */
-export const updateStyleHost = (options: StyleOptions = {}) => createStyleDecorator('update')(':host', options);
+export function updateStyleHost(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): any;
+export function updateStyleHost(): MethodDecorator;
+export function updateStyleHost(options: StyleOptions): MethodDecorator;
+export function updateStyleHost(targetOrOptions?: any, propertyKey?: string | symbol, descriptor?: PropertyDescriptor): any {
+  if (propertyKey !== undefined) {
+    const decorator = createStyleDecorator('update')(':host', {});
+    return decorator(targetOrOptions, propertyKey, descriptor);
+  }
+  return createStyleDecorator('update')(':host', (targetOrOptions as StyleOptions) || {});
+}
 
 /**
  * @removeStyle decorator to surgically remove styles from a target element.
@@ -123,10 +158,20 @@ export const removeStyle = (selector: string, options: StyleOptions = {}) => cre
 
 /**
  * @removeStyleHost decorator - simplified version of @removeStyle for :host selector.
- * Usage: @removeStyleHost clearStyles() { return ['color', 'display']; }
- * Usage: @removeStyleHost({ root: 'shadow' }) clearStyles() { return ['color']; }
+ * Usage: @removeStyleHost clearStyles() { return ['color']; }
+ * Usage: @removeStyleHost() clearStyles() { return ['color']; }
+ * Usage: @removeStyleHost({ ... }) clearStyles() { return ['color']; }
  */
-export const removeStyleHost = (options: StyleOptions = {}) => createStyleDecorator('remove')(':host', options);
+export function removeStyleHost(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): any;
+export function removeStyleHost(): MethodDecorator;
+export function removeStyleHost(options: StyleOptions): MethodDecorator;
+export function removeStyleHost(targetOrOptions?: any, propertyKey?: string | symbol, descriptor?: PropertyDescriptor): any {
+  if (propertyKey !== undefined) {
+    const decorator = createStyleDecorator('remove')(':host', {});
+    return decorator(targetOrOptions, propertyKey, descriptor);
+  }
+  return createStyleDecorator('remove')(':host', (targetOrOptions as StyleOptions) || {});
+}
 
 export const findAllStyleMetadata = (target: any): Map<string | symbol, StyleMetadata> => {
   const result = new Map<string | symbol, StyleMetadata>();

package/src/index.ts

@@ -10,18 +10,18 @@ export * from './types';
 
 // Utilities
 export * from './utils/Utils';
-export * from './utils/TemplateUtils';
 
 // Config
 export * from './config/config';
 
 // Registration Factory
-export default (w: Window, other?: ((w: Window) => ConstructorType<any>)[]): ConstructorType<any>[] => {
+export default (w: Window, other?: (((w: Window) => ConstructorType<any>) | any) []) => {
   registerAllElements(w);
   const r = other?.map(fn => {
-    const a = fn(w);
-    // console.log('l', fn, a)
-    return a;
+    if (typeof fn === 'function') {
+      const a = fn(w);
+    } else {
+    }
   });
-  return r??[];
+  // return r??[];
 };

package/src/utils/Utils.ts

@@ -3,6 +3,150 @@ import {getElementConfig} from "../decorators";
 
 export const SWC_NOT_FOUND = Symbol('SWC_NOT_FOUND');
 
+// DOM Creation Utilities
+export const htmlFragment = (html: string, doc?: Document): DocumentFragment => {
+  const d = doc || (typeof document !== 'undefined' ? document : undefined);
+  if (!d) throw new Error('Document is not available');
+  const template = d.createElement('template');
+  template.innerHTML = html.trim();
+  return template.content;
+};
+
+export const textNode = (text: string | any, doc?: Document): Text => {
+  const d = doc || (typeof document !== 'undefined' ? document : undefined);
+  if (!d) throw new Error('Document is not available');
+  return d.createTextNode(text !== undefined && text !== null ? String(text) : '');
+};
+
+export const commentNode = (comment: string | any, doc?: Document): Comment => {
+  const d = doc || (typeof document !== 'undefined' ? document : undefined);
+  if (!d) throw new Error('Document is not available');
+  return d.createComment(comment !== undefined && comment !== null ? String(comment) : '');
+};
+
+export const createElement = <T extends HTMLElement>(
+  tagName: string,
+  options?: { html?: string; attrs?: Record<string, any>; doc?: Document }
+): T => {
+  const d = options?.doc || (typeof document !== 'undefined' ? document : undefined);
+  if (!d) throw new Error('Document is not available');
+  const el = d.createElement(tagName) as T;
+  if (options?.html) el.innerHTML = options.html;
+  if (options?.attrs) {
+    Object.entries(options.attrs).forEach(([k, v]) => el.setAttribute(k, String(v)));
+  }
+  return el;
+};
+
+// Element factory functions
+export const htmlDivElement = (html: string, options?: { doc?: Document; attrs?: Record<string, any> }): HTMLDivElement => {
+  const d = options?.doc || (typeof document !== 'undefined' ? document : undefined);
+  if (!d) throw new Error('Document is not available');
+  const el = d.createElement('div') as HTMLDivElement;
+  el.innerHTML = html.trim();
+  if (options?.attrs) {
+    Object.entries(options.attrs).forEach(([k, v]) => el.setAttribute(k, String(v)));
+  }
+  return el;
+};
+
+export const htmlSpanElement = (html: string, options?: { doc?: Document; attrs?: Record<string, any> }): HTMLSpanElement => {
+  const d = options?.doc || (typeof document !== 'undefined' ? document : undefined);
+  if (!d) throw new Error('Document is not available');
+  const el = d.createElement('span') as HTMLSpanElement;
+  el.innerHTML = html.trim();
+  if (options?.attrs) {
+    Object.entries(options.attrs).forEach(([k, v]) => el.setAttribute(k, String(v)));
+  }
+  return el;
+};
+
+export const htmlButtonElement = (html: string, options?: { doc?: Document; attrs?: Record<string, any> }): HTMLButtonElement => {
+  const d = options?.doc || (typeof document !== 'undefined' ? document : undefined);
+  if (!d) throw new Error('Document is not available');
+  const el = d.createElement('button') as HTMLButtonElement;
+  el.innerHTML = html.trim();
+  if (options?.attrs) {
+    Object.entries(options.attrs).forEach(([k, v]) => el.setAttribute(k, String(v)));
+  }
+  return el;
+};
+
+export const htmlUlElement = (options?: { doc?: Document; attrs?: Record<string, any> }): HTMLUListElement => {
+  const d = options?.doc || (typeof document !== 'undefined' ? document : undefined);
+  if (!d) throw new Error('Document is not available');
+  const el = d.createElement('ul') as HTMLUListElement;
+  if (options?.attrs) {
+    Object.entries(options.attrs).forEach(([k, v]) => el.setAttribute(k, String(v)));
+  }
+  return el;
+};
+
+export const htmlLiElement = (html: string, options?: { doc?: Document; attrs?: Record<string, any> }): HTMLLIElement => {
+  const d = options?.doc || (typeof document !== 'undefined' ? document : undefined);
+  if (!d) throw new Error('Document is not available');
+  const el = d.createElement('li') as HTMLLIElement;
+  el.innerHTML = html.trim();
+  if (options?.attrs) {
+    Object.entries(options.attrs).forEach(([k, v]) => el.setAttribute(k, String(v)));
+  }
+  return el;
+};
+
+export const htmlAElement = (html: string, options?: { href?: string; doc?: Document; attrs?: Record<string, any> }): HTMLAnchorElement => {
+  const d = options?.doc || (typeof document !== 'undefined' ? document : undefined);
+  if (!d) throw new Error('Document is not available');
+  const el = d.createElement('a') as HTMLAnchorElement;
+  el.innerHTML = html.trim();
+  if (options?.href) el.href = options.href;
+  if (options?.attrs) {
+    Object.entries(options.attrs).forEach(([k, v]) => el.setAttribute(k, String(v)));
+  }
+  return el;
+};
+
+export const htmlPElement = (html: string, options?: { doc?: Document; attrs?: Record<string, any> }): HTMLParagraphElement => {
+  const d = options?.doc || (typeof document !== 'undefined' ? document : undefined);
+  if (!d) throw new Error('Document is not available');
+  const el = d.createElement('p') as HTMLParagraphElement;
+  el.innerHTML = html.trim();
+  if (options?.attrs) {
+    Object.entries(options.attrs).forEach(([k, v]) => el.setAttribute(k, String(v)));
+  }
+  return el;
+};
+
+export const htmlHeadingElement = (level: 1 | 2 | 3 | 4 | 5 | 6, html: string, options?: { doc?: Document; attrs?: Record<string, any> }): HTMLHeadingElement => {
+  const d = options?.doc || (typeof document !== 'undefined' ? document : undefined);
+  if (!d) throw new Error('Document is not available');
+  const el = d.createElement(`h${level}`) as HTMLHeadingElement;
+  el.innerHTML = html.trim();
+  if (options?.attrs) {
+    Object.entries(options.attrs).forEach(([k, v]) => el.setAttribute(k, String(v)));
+  }
+  return el;
+};
+
+export const htmlSectionElement = (options?: { doc?: Document; attrs?: Record<string, any> }): HTMLElement => {
+  const d = options?.doc || (typeof document !== 'undefined' ? document : undefined);
+  if (!d) throw new Error('Document is not available');
+  const el = d.createElement('section');
+  if (options?.attrs) {
+    Object.entries(options.attrs).forEach(([k, v]) => el.setAttribute(k, String(v)));
+  }
+  return el;
+};
+
+export const htmlArticleElement = (options?: { doc?: Document; attrs?: Record<string, any> }): HTMLElement => {
+  const d = options?.doc || (typeof document !== 'undefined' ? document : undefined);
+  if (!d) throw new Error('Document is not available');
+  const el = d.createElement('article');
+  if (options?.attrs) {
+    Object.entries(options.attrs).forEach(([k, v]) => el.setAttribute(k, String(v)));
+  }
+  return el;
+};
+
 export namespace SwcUtils {
   export const getHelperSet = (win: Window): HelperSet => {
     const doc: Document = win.document;