@dooboostore/simple-web-component 1.0.33 → 1.0.35

package/package.json

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

package/src/decorators/addEventListener.ts

@@ -10,7 +10,7 @@ export interface AddEventListenerBaseOptions extends EventListenerOptions {
   preventDefault?: boolean;
   removeOnDisconnected?: boolean;
   delegate?: boolean;
-  filter?: (target: Event | CustomEvent, helper: HelperHostSet) => boolean;
+  filter?: (target: Event | CustomEvent, meta:{currentThis: any, helper: HelperHostSet}) => boolean;
 }
 
 export interface AddEventListenerMetadata {

package/src/decorators/applyAttribute.ts

@@ -7,6 +7,7 @@ export type AttributeAction = 'set' | 'update' | 'remove';
 
 export interface AttributeApplyOptions extends SwcQueryOptions {
   name?: string;
+  filter?: (target: HTMLElement, value: any, meta: {currentThis: any, helper: HelperHostSet}) => boolean;
 }
 
 export interface AttributeApplyMetadata {
@@ -43,76 +44,88 @@ function createAttributeDecorator(action: AttributeAction) {
       });
 
       const original = descriptor.value;
-      descriptor.value = async function (...args: any[]) {
+      descriptor.value = function (...args: any[]) {
         ensureInit(this);
-        const res = await (original as any).apply(this, args);
-        if (res !== undefined) {
-          const win = (this as any).ownerDocument?.defaultView || window;
-          const host = this as unknown as HTMLElement;
-          const hostSet = { ...SwcUtils.getHelperAndHostSet(win, host), $this: this };
-          const r = finalOptions.root || 'auto';
-          const targetEls: HTMLElement[] = [];
-
-          const applyRoot = (t: any) => {
-            if (!t || !(t instanceof win.HTMLElement)) return;
-            targetEls.push(t);
-          };
-
-          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(host);
-          else {
-            const targetRoot = r === 'auto' ? (host.shadowRoot || host) : (r === 'shadow' ? host.shadowRoot : host);
-            if (targetRoot) {
-                const found = targetRoot.querySelectorAll(selector);
-                if (found) targetEls.push(...(Array.from(found) as HTMLElement[]));
+        const res = (original as any).apply(this, args);
+
+        const handleResult = (resolvedValue: any) => {
+          if (resolvedValue !== undefined) {
+            const win = (this as any).ownerDocument?.defaultView || window;
+            const host = this as unknown as HTMLElement;
+            const hostSet = { ...SwcUtils.getHelperAndHostSet(win, host), $this: this };
+            const r = finalOptions.root || 'auto';
+            const targetEls: HTMLElement[] = [];
+
+            const applyRoot = (t: any) => {
+              if (!t || !(t instanceof win.HTMLElement)) return;
+              targetEls.push(t);
+            };
+
+            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(host);
+            else {
+              const targetRoot = r === 'auto' ? (host.shadowRoot || host) : (r === 'shadow' ? host.shadowRoot : host);
+              if (targetRoot) {
+                  const found = targetRoot.querySelectorAll(selector);
+                  if (found) targetEls.push(...(Array.from(found) as HTMLElement[]));
+              }
             }
-          }
 
-          targetEls.forEach(targetEl => {
-            const resolvedRes = typeof res === 'function' ? (res as any)(targetEl, hostSet) : res;
+            targetEls.forEach(targetEl => {
+              if (finalOptions.filter && !finalOptions.filter(targetEl, resolvedValue, {currentThis: this, helper: hostSet})) {
+                return;
+              }
+              const resolvedRes = typeof resolvedValue === 'function' ? (resolvedValue as any)(targetEl, hostSet) : resolvedValue;
 
-            if (action === 'set' || action === 'update') {
-              if (attributeName) {
-                // Case: @setAttribute(selector, 'name')
-                if (resolvedRes === null || resolvedRes === undefined || resolvedRes === false) {
+              if (action === 'set' || action === 'update') {
+                if (attributeName) {
+                  // Case: @setAttribute(selector, 'name')
+                  if (resolvedRes === null || resolvedRes === undefined || resolvedRes === false) {
+                    targetEl.removeAttribute(attributeName);
+                  } else {
+                    targetEl.setAttribute(attributeName, resolvedRes === true ? '' : String(resolvedRes));
+                  }
+                } else if (typeof resolvedRes === 'object' && resolvedRes !== null && !Array.isArray(resolvedRes)) {
+                  // Case: @applyAttribute(selector) with Object return
+                  Object.entries(resolvedRes as any).forEach(([attr, val]) => {
+                    const finalVal = typeof val === 'function' ? val(targetEl, hostSet) : val;
+                    if (finalVal === null || finalVal === undefined || finalVal === false) {
+                      targetEl.removeAttribute(attr);
+                    } else {
+                      targetEl.setAttribute(attr, finalVal === true ? '' : String(finalVal));
+                    }
+                  });
+                }
+              } else if (action === 'remove') {
+                if (attributeName) {
                   targetEl.removeAttribute(attributeName);
+                } else if (typeof resolvedRes === 'object' && resolvedRes !== null && !Array.isArray(resolvedRes)) {
+                  Object.entries(resolvedRes as any).forEach(([attr, val]) => {
+                    const shouldRemove = typeof val === 'function' ? val(targetEl, hostSet) : !!val;
+                    if (shouldRemove) targetEl.removeAttribute(attr);
+                  });
                 } else {
-                  targetEl.setAttribute(attributeName, resolvedRes === true ? '' : String(resolvedRes));
+                  const attrs = Array.isArray(resolvedRes) ? resolvedRes : [resolvedRes];
+                  attrs.forEach(a => targetEl.removeAttribute(String(a)));
                 }
-              } else if (typeof resolvedRes === 'object' && resolvedRes !== null && !Array.isArray(resolvedRes)) {
-                // Case: @applyAttribute(selector) with Object return
-                Object.entries(resolvedRes as any).forEach(([attr, val]) => {
-                  const finalVal = typeof val === 'function' ? val(targetEl, hostSet) : val;
-                  if (finalVal === null || finalVal === undefined || finalVal === false) {
-                    targetEl.removeAttribute(attr);
-                  } else {
-                    targetEl.setAttribute(attr, finalVal === true ? '' : String(finalVal));
-                  }
-                });
-              }
-            } else if (action === 'remove') {
-              if (attributeName) {
-                targetEl.removeAttribute(attributeName);
-              } else if (typeof resolvedRes === 'object' && resolvedRes !== null && !Array.isArray(resolvedRes)) {
-                Object.entries(resolvedRes as any).forEach(([attr, val]) => {
-                  const shouldRemove = typeof val === 'function' ? val(targetEl, hostSet) : !!val;
-                  if (shouldRemove) targetEl.removeAttribute(attr);
-                });
-              } else {
-                const attrs = Array.isArray(resolvedRes) ? resolvedRes : [resolvedRes];
-                attrs.forEach(a => targetEl.removeAttribute(String(a)));
               }
-            }
-          });
+            });
+          }
+          return resolvedValue;
+        };
+
+        if (res instanceof Promise) {
+          return res.then(handleResult);
+        } else {
+          return handleResult(res);
         }
-        return res;
       };
       return descriptor;
     };

package/src/decorators/applyClass.ts

@@ -7,7 +7,9 @@ export const CLASS_METADATA_KEY = Symbol.for('simple-web-component:class');
 
 export type ClassAction = 'set' | 'update' | 'add' | 'remove' | 'toggle';
 
-export interface ClassApplyOptions extends SwcQueryOptions {}
+export interface ClassApplyOptions extends SwcQueryOptions {
+  filter?: (target: HTMLElement, value: any, meta: {currentThis: any, helper: HelperHostSet}) => boolean;
+}
 
 export interface ClassApplyMetadata {
   propertyKey: string | symbol;
@@ -38,88 +40,100 @@ function createClassDecorator(action: ClassAction) {
       metaList.set(propertyKey, { propertyKey, selector, action, options: finalOptions });
 
       const original = descriptor.value;
-      descriptor.value = async function (...args: any[]) {
+      descriptor.value = function (...args: any[]) {
         ensureInit(this);
-        const res = await (original as any).apply(this, args);
-        if (res !== undefined) {
-          const win = (this as any).ownerDocument?.defaultView || window;
-          const host = this as unknown as HTMLElement;
-          const hostSet = { ...SwcUtils.getHelperAndHostSet(win, host), $this: this };
-          const r = finalOptions.root || 'auto';
-          const targetEls: HTMLElement[] = [];
-
-          const applyRoot = (t: any) => {
-            if (!t || !(t instanceof win.HTMLElement)) return;
-            targetEls.push(t);
-          };
-
-          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(host);
-          else {
-            const targetRoot = r === 'auto' ? (host.shadowRoot || host) : (r === 'shadow' ? host.shadowRoot : host);
-            if (targetRoot) {
-                const found = targetRoot.querySelectorAll(selector);
-                if (found) targetEls.push(...(Array.from(found) as HTMLElement[]));
+        const res = (original as any).apply(this, args);
+
+        const handleResult = (resolvedValue: any) => {
+          if (resolvedValue !== undefined) {
+            const win = (this as any).ownerDocument?.defaultView || window;
+            const host = this as unknown as HTMLElement;
+            const hostSet = { ...SwcUtils.getHelperAndHostSet(win, host), $this: this };
+            const r = finalOptions.root || 'auto';
+            const targetEls: HTMLElement[] = [];
+
+            const applyRoot = (t: any) => {
+              if (!t || !(t instanceof win.HTMLElement)) return;
+              targetEls.push(t);
+            };
+
+            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(host);
+            else {
+              const targetRoot = r === 'auto' ? (host.shadowRoot || host) : (r === 'shadow' ? host.shadowRoot : host);
+              if (targetRoot) {
+                  const found = targetRoot.querySelectorAll(selector);
+                  if (found) targetEls.push(...(Array.from(found) as HTMLElement[]));
+              }
             }
-          }
 
-          targetEls.forEach(targetEl => {
-            const resolvedRes = typeof res === 'function' ? (res as any)(targetEl, hostSet) : res;
-
-            if (action === 'set') {
-              let classes = '';
-              if (classMap && typeof classMap === 'string') {
-                 classes = resolvedRes ? classMap : '';
-              } else if (typeof resolvedRes === 'object' && resolvedRes !== null && !Array.isArray(resolvedRes)) {
-                classes = Object.entries(resolvedRes as any)
-                  .filter(([_, force]) => typeof force === 'function' ? force(targetEl, hostSet) : !!force)
-                  .map(([cls]) => cls)
-                  .join(' ');
-              } else {
-                classes = Array.isArray(resolvedRes) ? (resolvedRes as any[]).join(' ') : String(resolvedRes);
-              }
-              targetEl.className = classes;
-            } else if (action === 'update' || action === 'toggle') {
-              if (classMap && typeof classMap === 'string') {
-                  targetEl.classList.toggle(classMap, !!resolvedRes);
-              } else if (typeof resolvedRes === 'object' && resolvedRes !== null && !Array.isArray(resolvedRes)) {
-                Object.entries(resolvedRes as any).forEach(([cls, force]) => {
-                  const isActive = typeof force === 'function' ? force(targetEl, hostSet) : !!force;
-                  targetEl.classList.toggle(cls, isActive);
-                });
-              } else {
-                const classes = Array.isArray(resolvedRes) ? (resolvedRes as any[]).map(String) : [String(resolvedRes)];
-                if (action === 'update') targetEl.classList.add(...classes);
-                else classes.forEach(c => targetEl.classList.toggle(c));
+            targetEls.forEach(targetEl => {
+              if (finalOptions.filter && !finalOptions.filter(targetEl, resolvedValue, {currentThis: this, helper: hostSet})) {
+                return;
               }
-            } else if (action === 'add' || action === 'remove') {
-              if (classMap && typeof classMap === 'string' && !!resolvedRes) {
-                  if (action === 'add') targetEl.classList.add(classMap);
-                  else targetEl.classList.remove(classMap);
-              } else if (typeof resolvedRes === 'object' && resolvedRes !== null && !Array.isArray(resolvedRes)) {
-                Object.entries(resolvedRes as any).forEach(([cls, force]) => {
-                  const shouldExecute = typeof force === 'function' ? force(targetEl, hostSet) : !!force;
-                  if (shouldExecute) {
-                    if (action === 'add') targetEl.classList.add(cls);
-                    else targetEl.classList.remove(cls);
-                  }
-                });
-              } else {
-                const classes = Array.isArray(resolvedRes) ? (resolvedRes as any[]).map(String) : [String(resolvedRes)];
-                if (action === 'add') targetEl.classList.add(...classes);
-                else targetEl.classList.remove(...classes);
+              const resolvedRes = typeof resolvedValue === 'function' ? (resolvedValue as any)(targetEl, hostSet) : resolvedValue;
+
+              if (action === 'set') {
+                let classes = '';
+                if (classMap && typeof classMap === 'string') {
+                   classes = resolvedRes ? classMap : '';
+                } else if (typeof resolvedRes === 'object' && resolvedRes !== null && !Array.isArray(resolvedRes)) {
+                  classes = Object.entries(resolvedRes as any)
+                    .filter(([_, force]) => typeof force === 'function' ? force(targetEl, hostSet) : !!force)
+                    .map(([cls]) => cls)
+                    .join(' ');
+                } else {
+                  classes = Array.isArray(resolvedRes) ? (resolvedRes as any[]).join(' ') : String(resolvedRes);
+                }
+                targetEl.className = classes;
+              } else if (action === 'update' || action === 'toggle') {
+                if (classMap && typeof classMap === 'string') {
+                    targetEl.classList.toggle(classMap, !!resolvedRes);
+                } else if (typeof resolvedRes === 'object' && resolvedRes !== null && !Array.isArray(resolvedRes)) {
+                  Object.entries(resolvedRes as any).forEach(([cls, force]) => {
+                    const isActive = typeof force === 'function' ? force(targetEl, hostSet) : !!force;
+                    targetEl.classList.toggle(cls, isActive);
+                  });
+                } else {
+                  const classes = Array.isArray(resolvedRes) ? (resolvedRes as any[]).map(String) : [String(resolvedRes)];
+                  if (action === 'update') targetEl.classList.add(...classes);
+                  else classes.forEach(c => targetEl.classList.toggle(c));
+                }
+              } else if (action === 'add' || action === 'remove') {
+                if (classMap && typeof classMap === 'string' && !!resolvedRes) {
+                    if (action === 'add') targetEl.classList.add(classMap);
+                    else targetEl.classList.remove(classMap);
+                } else if (typeof resolvedRes === 'object' && resolvedRes !== null && !Array.isArray(resolvedRes)) {
+                  Object.entries(resolvedRes as any).forEach(([cls, force]) => {
+                    const shouldExecute = typeof force === 'function' ? force(targetEl, hostSet) : !!force;
+                    if (shouldExecute) {
+                      if (action === 'add') targetEl.classList.add(cls);
+                      else targetEl.classList.remove(cls);
+                    }
+                  });
+                } else {
+                  const classes = Array.isArray(resolvedRes) ? (resolvedRes as any[]).map(String) : [String(resolvedRes)];
+                  if (action === 'add') targetEl.classList.add(...classes);
+                  else targetEl.classList.remove(...classes);
+                }
               }
-            }
-          });
+            });
+          }
+          return resolvedValue;
+        };
+
+        if (res instanceof Promise) {
+          return res.then(handleResult);
+        } else {
+          return handleResult(res);
         }
-        return res;
       };
       return descriptor;
     };

package/src/decorators/applyNode.ts

@@ -2,7 +2,15 @@ import { ReflectUtils } from '@dooboostore/core';
 import { ensureInit, getElementConfig } from './elementDefine';
 import { HelperHostSet, SwcRootType } from '../types';
 import { SwcUtils } from "../utils/Utils";
-
+/*
+<!-- beforebegin -->
+<p>
+  <!-- afterbegin -->
+  foo
+  <!-- beforeend -->
+</p>
+<!-- afterend -->
+ */
 export type ApplyNodePosition = 'beforeBegin' | 'afterBegin' | 'beforeEnd' | 'afterEnd' | 'replace' | 'replaceChildren' | 'innerHtml' | 'innerText' | 'remove';
 
 export interface ApplyNodeOptions {
@@ -12,7 +20,7 @@ export interface ApplyNodeOptions {
    * Filter function to determine whether to perform DOM operation.
    * If it returns false, the operation is skipped.
    */
-  filter?: (target: HTMLElement | ShadowRoot, newValue: any, helper: HelperHostSet) => boolean;
+  filter?: (target: HTMLElement | ShadowRoot, newValue: any, meta:{currentThis: any,helper: HelperHostSet}) => boolean;
   /**
    * Optional loading content to display while an async method is executing.
    */
@@ -113,17 +121,8 @@ export function applyNode(selector: string, options: ApplyNodeOptions = { positi
       const runApply = (target: any, val: any) => {
         const pos = options.position || 'beforeEnd';
         
-        // Intelligent Default Filter
-        const defaultFilter = (t: any, v: any) => {
-            if (v instanceof Node) return !t.contains(v);
-            if (pos === 'innerHtml' && typeof v === 'string') return t.innerHTML !== v;
-            if (pos === 'replaceChildren' && v instanceof Node) return !t.contains(v);
-            return true;
-        };
-        
-        const activeFilter = options.filter || defaultFilter;
-        
-        if (activeFilter(target, val, hostSet)) {
+        // 사용자가 filter를 명시하면 그 조건으로, 아니면 항상 적용
+        if (!options.filter || options.filter(target, val, {currentThis: this, helper: hostSet})) {
             applyToDom(target, val, pos, currentDoc);
         }
       };
@@ -189,3 +188,7 @@ export function applyReplaceChildrenNode(selector: string, options: ApplyNodeOpt
 export function applyInnerHtmlNode(selector: string, options: ApplyNodeOptions = {}): MethodDecorator {
     return applyNode(selector, { ...options, position: 'innerHtml' });
 }
+
+export function applyInnerTextNode(selector: string, options: ApplyNodeOptions = {}): MethodDecorator {
+    return applyNode(selector, { ...options, position: 'innerText' });
+}

package/src/decorators/applyStyle.ts

@@ -5,7 +5,9 @@ import { SwcQueryOptions, HelperHostSet } from '../types';
 
 export type StyleAction = 'set' | 'update' | 'remove';
 
-export interface StyleApplyOptions extends SwcQueryOptions {}
+export interface StyleApplyOptions extends SwcQueryOptions {
+  filter?: (target: HTMLElement, value: any, meta: {currentThis: any, helper: HelperHostSet}) => boolean;
+}
 
 export interface StyleApplyMetadata {
   propertyKey: string | symbol;
@@ -28,72 +30,84 @@ function createStyleDecorator(action: StyleAction) {
       metaList.set(propertyKey, { propertyKey, selector, action, options });
 
       const original = descriptor.value;
-      descriptor.value = async function (...args: any[]) {
+      descriptor.value = function (...args: any[]) {
         ensureInit(this);
-        const res = await (original as any).apply(this, args);
-        if (res !== undefined) {
-          const win = (this as any).ownerDocument?.defaultView || window;
-          const host = this as unknown as HTMLElement;
-          const hostSet = SwcUtils.getHelperAndHostSet(win, host);
-          const r = options.root || 'auto';
-          const targetEls: HTMLElement[] = [];
-
-          const applyRoot = (t: any) => {
-            if (!t || !(t instanceof win.HTMLElement)) return;
-            targetEls.push(t);
-          };
-
-          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(host);
-          else {
-            const targetRoot = r === 'auto' ? (host.shadowRoot || host) : (r === 'shadow' ? host.shadowRoot : host);
-            if (targetRoot) {
-                const found = targetRoot.querySelectorAll(selector);
-                if (found) targetEls.push(...(Array.from(found) as HTMLElement[]));
+        const res = (original as any).apply(this, args);
+
+        const handleResult = (resolvedValue: any) => {
+          if (resolvedValue !== undefined) {
+            const win = (this as any).ownerDocument?.defaultView || window;
+            const host = this as unknown as HTMLElement;
+            const hostSet = SwcUtils.getHelperAndHostSet(win, host);
+            const r = options.root || 'auto';
+            const targetEls: HTMLElement[] = [];
+
+            const applyRoot = (t: any) => {
+              if (!t || !(t instanceof win.HTMLElement)) return;
+              targetEls.push(t);
+            };
+
+            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(host);
+            else {
+              const targetRoot = r === 'auto' ? (host.shadowRoot || host) : (r === 'shadow' ? host.shadowRoot : host);
+              if (targetRoot) {
+                  const found = targetRoot.querySelectorAll(selector);
+                  if (found) targetEls.push(...(Array.from(found) as HTMLElement[]));
+              }
             }
-          }
 
-          targetEls.forEach(targetEl => {
-            const resolvedRes = typeof res === 'function' ? (res as any)(targetEl, hostSet) : res;
-
-            if (action === 'set' || action === 'update') {
-              if (action === 'set') targetEl.style.cssText = '';
-              
-              if (typeof resolvedRes === 'object' && resolvedRes !== null && !Array.isArray(resolvedRes)) {
-                Object.entries(resolvedRes as any).forEach(([prop, val]) => {
-                  const finalVal = typeof val === 'function' ? val(targetEl, hostSet) : val;
-                  if (finalVal === null || finalVal === undefined) {
-                    targetEl.style.removeProperty(prop);
-                  } else {
-                    targetEl.style[prop as any] = String(finalVal);
-                  }
-                });
-              } else if (typeof resolvedRes === 'string') {
-                targetEl.style.cssText = resolvedRes;
+            targetEls.forEach(targetEl => {
+              if (options.filter && !options.filter(targetEl, resolvedValue, {currentThis: this, helper: hostSet})) {
+                return;
               }
-            } else if (action === 'remove') {
-              if (typeof resolvedRes === 'object' && resolvedRes !== null && !Array.isArray(resolvedRes)) {
-                Object.entries(resolvedRes as any).forEach(([prop, val]) => {
-                  const shouldRemove = typeof val === 'function' ? val(targetEl, hostSet) : !!val;
-                  if (shouldRemove) {
-                    targetEl.style.removeProperty(prop);
-                  }
-                });
-              } else {
-                const props = Array.isArray(resolvedRes) ? resolvedRes : [resolvedRes];
-                props.forEach(p => targetEl.style.removeProperty(String(p)));
+              const resolvedRes = typeof resolvedValue === 'function' ? (resolvedValue as any)(targetEl, hostSet) : resolvedValue;
+
+              if (action === 'set' || action === 'update') {
+                if (action === 'set') targetEl.style.cssText = '';
+                
+                if (typeof resolvedRes === 'object' && resolvedRes !== null && !Array.isArray(resolvedRes)) {
+                  Object.entries(resolvedRes as any).forEach(([prop, val]) => {
+                    const finalVal = typeof val === 'function' ? val(targetEl, hostSet) : val;
+                    if (finalVal === null || finalVal === undefined) {
+                      targetEl.style.removeProperty(prop);
+                    } else {
+                      targetEl.style[prop as any] = String(finalVal);
+                    }
+                  });
+                } else if (typeof resolvedRes === 'string') {
+                  targetEl.style.cssText = resolvedRes;
+                }
+              } else if (action === 'remove') {
+                if (typeof resolvedRes === 'object' && resolvedRes !== null && !Array.isArray(resolvedRes)) {
+                  Object.entries(resolvedRes as any).forEach(([prop, val]) => {
+                    const shouldRemove = typeof val === 'function' ? val(targetEl, hostSet) : !!val;
+                    if (shouldRemove) {
+                      targetEl.style.removeProperty(prop);
+                    }
+                  });
+                } else {
+                  const props = Array.isArray(resolvedRes) ? resolvedRes : [resolvedRes];
+                  props.forEach(p => targetEl.style.removeProperty(String(p)));
+                }
               }
-            }
-          });
+            });
+          }
+          return resolvedValue;
+        };
+
+        if (res instanceof Promise) {
+          return res.then(handleResult);
+        } else {
+          return handleResult(res);
         }
-        return res;
       };
       return descriptor;
     };