@dooboostore/simple-web-component 1.0.23 → 1.0.24

package/README.md

@@ -260,19 +260,26 @@ class StyledCard extends HTMLElement {
 
 ### Attribute & Property Decorators
 
-#### 10. `@attributeHost(name, options?)`
-Bidirectional attribute binding with automatic type conversion.
+#### 10. `@attributeHost`
+Bidirectional attribute binding with automatic type conversion on `:host` element.
+
+All usage patterns support automatic field-name-to-attribute-name conversion:
+- Without parentheses: `@attributeHost` - uses field name as attribute name
+- Empty parentheses: `@attributeHost()` - uses field name as attribute name  
+- Options only: `@attributeHost({ connectedInitialize: true })` - uses field name as attribute name
+- Custom name: `@attributeHost('custom-name')` - explicit attribute name
+- Custom name + options: `@attributeHost('custom-name', { type: Boolean })` - both specified
 
 ```typescript
 @elementDefine('input-field')
 class InputField extends HTMLElement {
-  @attributeHost('value', { connectedInitialize: true })
+  @attributeHost
   value: string = '';
 
   @attributeHost('disabled')
   disabled: boolean = false;
 
-  @attributeHost('count')
+  @attributeHost({ type: Number })
   count: number = 0;
 
   @onConnectedInnerHtml
@@ -544,11 +551,54 @@ class TodoList extends HTMLElement {
 - Remove temporary overlays
 - Clean up modal dialogs
 
+#### 15. `@queryHost` - Query :host Element
+Specialized query for the component element itself. Supports automatic or explicit usage.
+
+All usage patterns automatically set the element reference:
+- Without parentheses: `@queryHost` self?: HTMLElement;
+- Empty parentheses: `@queryHost()` self?: HTMLElement;
+- With options: `@queryHost({ root: 'shadow' })` self?: HTMLElement;
+
+```typescript
+@elementDefine('custom-card')
+class CustomCard extends HTMLElement {
+  @queryHost
+  self?: HTMLElement;
+  
+  @queryHost()
+  selfExplicit?: HTMLElement;
+
+  printTag() {
+    console.log(this.self?.tagName); // Logs: CUSTOM-CARD
+  }
+}
+```
+
+#### 16. `@queryAllHost` - Query All :host Children
+Returns all children of the component element. Useful for accessing direct children.
+
+All usage patterns automatically set the children array:
+- Without parentheses: `@queryAllHost` children?: HTMLElement[];
+- Empty parentheses: `@queryAllHost()` children?: HTMLElement[];
+- With options: `@queryAllHost({ root: 'shadow' })` children?: HTMLElement[];
+
+```typescript
+@elementDefine('card-container')
+class CardContainer extends HTMLElement {
+  @queryAllHost
+  allChildren?: HTMLElement[];
+
+  getChildCount() {
+    return this.allChildren?.length ?? 0;
+  }
+}
+```
+
 ---
 
 ### Event & Messaging Decorators
 
-#### 15. `@addEventListener(selector, event, options?)`
+#### 17. `@addEventListener(selector, event, options?)`
 Declarative event binding with automatic delegation.
 
 ```typescript
@@ -605,7 +655,7 @@ class TodoApp extends HTMLElement {
 - ✅ Parent communication (`:parentHost`, `:appHost`)
 - ✅ Auto-cleanup on `disconnectedCallback`
 
-#### 16. `@emitCustomEvent(target, type, options?)`
+#### 18. `@emitCustomEvent(target, type, options?)`
 Emit custom events to component hierarchy or global targets.
 
 ```typescript
@@ -683,40 +733,42 @@ class UserWidget extends HTMLElement {
 
 ### DOM Manipulation Decorators
 
-#### 17. `@applyNode(selector, options?)`
+#### 19. `@applyNode(selector, options?)`
 Surgically add, update, or replace DOM nodes at specific positions.
 
 ```typescript
+import { htmlDivElement, htmlFragment, htmlSpanElement } from '@dooboostore/simple-web-component';
+
 @elementDefine('counter-display')
 class CounterDisplay extends HTMLElement {
   private count = 0;
   private errorMessage = '';
 
-  // Replace all children with new content
+  // Replace all children with new content (return Node)
   @applyNode('#display', { position: 'replaceChildren' })
   updateDisplayCount() {
-    return `<span>${this.count}</span>`;
+    return htmlSpanElement(`${this.count}`);
   }
 
-  // Append to container
+  // Append to container (return Node)
   @applyNode('#history', { position: 'beforeEnd' })
   addHistoryEntry() {
-    return `<p>Count was: ${this.count}</p>`;
+    return htmlFragment(`<p>Count was: ${this.count}</p>`);
   }
 
-  // Set HTML content
+  // Set HTML content (return string)
   @applyNode('#status', { position: 'innerHtml' })
   setStatus() {
     return `<strong>Status: Active</strong>`;
   }
 
-  // Set text content
+  // Set text content (return string)
   @applyNode('#counter', { position: 'innerText' })
   updateCounter() {
     return this.count.toString();
   }
 
-  // Remove element if condition is truthy
+  // Remove element if condition is truthy (return boolean)
   @applyNode('#error-banner', { position: 'remove' })
   dismissError() {
     return this.errorMessage === '';  // Remove if no error
@@ -759,34 +811,160 @@ Control which DOM tree is searched with the `root` option:
 Shorthand decorators for common position-specific operations:
 
 **Position-Specific Variants:**
+
+Return **DOM Nodes** for position-based insertion. Use DOM creation functions:
+
 ```typescript
-@applyBeforeBeginNode('#target') prependTarget() { return `<div>Before</div>`; }
-@applyAfterBeginNode('#target') afterBeginTarget() { return `<div>After Begin</div>`; }
-@applyBeforeEndNode('#target') beforeEndTarget() { return `<div>Before End</div>`; }
-@applyAfterEndNode('#target') afterEndTarget() { return `<div>After</div>`; }
-@applyReplaceNode('#target') replaceTarget() { return `<div>Replaced</div>`; }
-@applyReplaceChildrenNode('#target') replaceChildrenTarget() { return `<div>New Children</div>`; }
-@applyInnerHtmlNode('#target') setInnerHtml() { return `<b>Bold</b>`; }
-@applyInnerTextNode('#target') setInnerText() { return 'Plain text'; }
-@applyRemoveNode('#target') removeTarget() { return true; }
+import { 
+  htmlFragment, htmlDivElement, htmlSpanElement, 
+  createElement, textNode 
+} from '@dooboostore/simple-web-component';
+
+@elementDefine('my-component')
+class MyComponent extends HTMLElement {
+  // Method 1: Using htmlFragment (DocumentFragment)
+  @applyBeforeBeginNode('#target') prependTarget() { 
+    return htmlFragment('<div>Before</div>');
+  }
+
+  // Method 2: Using htmlDivElement (single element)
+  @applyAfterBeginNode('#target') afterBeginTarget() { 
+    return htmlDivElement('After Begin');
+  }
+
+  // Method 3: Manual createElement (full control)
+  @applyBeforeEndNode('#target') beforeEndTarget() { 
+    return htmlDivElement('Before End');
+  }
+
+  @applyAfterEndNode('#target') afterEndTarget() { 
+    const el = htmlDivElement('After');
+    el.classList.add('highlight');
+    return el;
+  }
+
+  @applyReplaceNode('#target') replaceTarget() { 
+    return htmlFragment('<div class="replaced">Replaced</div>');
+  }
+
+  // Multiple nodes: return array
+  @applyReplaceChildrenNode('#target') replaceChildrenTarget() { 
+    return [
+      htmlDivElement('Item 1'),
+      htmlDivElement('Item 2'),
+      htmlDivElement('Item 3')
+    ];
+  }
+
+  // String return for innerHtml
+  @applyInnerHtmlNode('#target') setInnerHtml() { 
+    return `<b>Bold</b> <i>Italic</i>`;
+  }
+
+  // String return for innerText
+  @applyInnerTextNode('#target') setInnerText() { 
+    return 'Plain text';
+  }
+
+  // Boolean return for remove
+  @applyRemoveNode('#target') removeTarget() { 
+    return this.shouldHideTarget;
+  }
+}
+```
+
+**SSR Support (with custom Document):**
+
+```typescript
+// Browser
+return htmlDivElement('Content');  // Uses global document
+
+// SSR (e.g. Node.js with jsdom)
+const ssrDocument = new JSDOM().window.document;
+return htmlDivElement('Content', ssrDocument);  // Pass custom doc
 ```
 
 **Host-Targeted Variants (`:host` selector):**
+
+All Host variants support three usage patterns:
+- Without parentheses: `@applyBeforeBeginNodeHost` prependHost() { ... }
+- With empty parentheses: `@applyBeforeBeginNodeHost()` prependHost() { ... }
+- With options: `@applyBeforeBeginNodeHost({ ... })` prependHost() { ... }
+
 ```typescript
-@applyBeforeBeginNodeHost() prependHost() { return `<div>Before Host</div>`; }
-@applyAfterBeginNodeHost() afterBeginHost() { return `<div>After Begin</div>`; }
-@applyBeforeEndNodeHost() beforeEndHost() { return `<div>Before End</div>`; }
-@applyAfterEndNodeHost({ root: 'shadow' }) afterEndHost() { return `<div>After Host</div>`; }
-@applyReplaceNodeHost() replaceHost() { return `<div>Replaced Host</div>`; }
-@applyReplaceChildrenNodeHost() replaceChildrenHost() { return `<div>Shadow Children</div>`; }
-@applyInnerHtmlNodeHost() setHostInnerHtml() { return `<b>Host Content</b>`; }
-@applyInnerTextNodeHost() setHostInnerText() { return 'Host text'; }
-@applyRemoveNodeHost() removeHost() { return this.shouldRemove; }
+@elementDefine('my-component')
+class MyComponent extends HTMLElement {
+  @applyBeforeBeginNodeHost
+  prependHost() { 
+    return htmlFragment('<div>Before Host</div>');
+  }
+
+  @applyAfterBeginNodeHost() afterBeginHost() { 
+    return htmlSpanElement('After Begin');
+  }
+
+  @applyBeforeEndNodeHost beforeEndHost() { 
+    const el = htmlDivElement('Before End');
+    return el;
+  }
+
+  @applyAfterEndNodeHost afterEndHost() { 
+    return htmlFragment('After Host');
+  }
+
+  @applyReplaceNodeHost replaceHost() { 
+    return htmlFragment('<div>Replaced Host</div>');
+  }
+
+  // Multiple children in shadow DOM
+  @applyReplaceChildrenNodeHost() replaceChildrenHost() { 
+    return [
+      htmlDivElement('Shadow Child 1'),
+      htmlDivElement('Shadow Child 2')
+    ];
+  }
+
+  @applyInnerHtmlNodeHost setHostInnerHtml() { 
+    return `<h1>Host Content</h1>`;
+  }
+
+  @applyInnerTextNodeHost() setHostInnerText() { 
+    return 'Host text content';
+  }
+
+  @applyRemoveNodeHost removeHost() { 
+    return this.isRemoved;
+  }
+}
 ```
 
----
+**Return Types by Position:**
+- `beforeBegin`, `afterBegin`, `beforeEnd`, `afterEnd`: **Node | Node[]** 
+- `replace`: **Node**
+- `replaceChildren`: **Node | Node[]**
+- `innerHtml`: **string**
+- `innerText`: **string**
+- `remove`: **boolean** (truthy = remove)
+
+**Available DOM Functions:**
+- `htmlFragment(html, doc?)` - Create DocumentFragment from HTML
+- `textNode(text, doc?)` - Create Text node
+- `commentNode(comment, doc?)` - Create Comment node
+- `createElement(tagName, options?, doc?)` - Create any element with attributes
+- `htmlDivElement(html, doc?)` - Create div element
+- `htmlSpanElement(html, doc?)` - Create span element
+- `htmlButtonElement(html, doc?)` - Create button element
+- `htmlAElement(html, href?, doc?)` - Create anchor element
+- `htmlPElement(html, doc?)` - Create paragraph element
+- `htmlLiElement(html, doc?)` - Create list item element
+- `htmlUlElement(doc?)` - Create unordered list
+- `htmlHeadingElement(level, html, doc?)` - Create h1-h6
+- `htmlSectionElement(doc?)` - Create section
+- `htmlArticleElement(doc?)` - Create article
 
-#### 18. `@setStyle(selector, options?)` / `@updateStyle(selector, options?)` / `@removeStyle(selector, options?)`
+**All functions accept optional `doc` parameter for SSR support.**
+
+#### 20. `@setStyle(selector, options?)` / `@updateStyle(selector, options?)` / `@removeStyle(selector, options?)`
 
 Manipulate CSS styles on elements with full Shadow DOM support.
 
@@ -839,18 +1017,26 @@ class StyledComponent extends HTMLElement {
 ```
 
 **Host-Targeted Variants:**
+
+Note: `:host` selector targets the component itself (boundary), so `root` option is ignored.
+
+All Host variants support three usage patterns:
+- Without parentheses: `@setStyleHost` setHostStyle() { ... }
+- With empty parentheses: `@setStyleHost()` setHostStyle() { ... }
+- With options: `@setStyleHost({ ... })` setHostStyle() { ... }
+
 ```typescript
-@setStyleHost({ root: 'shadow' })
+@setStyleHost
 setHostStyle() {
   return { display: 'flex', gap: '10px' };
 }
 
-@updateStyleHost({ root: 'shadow' })
+@updateStyleHost()
 updateHostStyle() {
   return { backgroundColor: '#f0f0f0' };
 }
 
-@removeStyleHost({ root: 'shadow' })
+@removeStyleHost()
 clearHostStyle() {
   return ['backgroundColor'];
 }
@@ -858,7 +1044,7 @@ clearHostStyle() {
 
 ---
 
-#### 19. `@setClassList(selector, options?)` / `@addClassList(selector, options?)` / `@removeClassList(selector, options?)` / `@toggleClassList(selector, options?)` / `@updateClassList(selector, options?)`
+#### 21. `@setClassList(selector, options?)` / `@addClassList(selector, options?)` / `@removeClassList(selector, options?)` / `@toggleClassList(selector, options?)` / `@updateClassList(selector, options?)`
 
 Manipulate CSS classes on elements declaratively with Shadow DOM support.
 
@@ -914,28 +1100,36 @@ class TabComponent extends HTMLElement {
 ```
 
 **Host-Targeted Variants:**
+
+Note: `:host` selector targets the component itself (boundary), so `root` option is ignored.
+
+All Host variants support three usage patterns:
+- Without parentheses: `@setClassListHost` setHostClasses() { ... }
+- With empty parentheses: `@setClassListHost()` setHostClasses() { ... }
+- With options: `@setClassListHost({ ... })` setHostClasses() { ... }
+
 ```typescript
-@addClassListHost({ root: 'shadow' })
+@addClassListHost
 addHostClasses() {
   return ['component', 'interactive'];
 }
 
-@removeClassListHost({ root: 'shadow' })
+@removeClassListHost()
 removeHostClasses() {
   return ['loading'];
 }
 
-@toggleClassListHost({ root: 'shadow' })
+@toggleClassListHost()
 toggleHostClass() {
   return this.isOpen;  // Apply 'open' class if true
 }
 
-@setClassListHost({ root: 'shadow' })
+@setClassListHost
 setHostClasses() {
   return this.isOpen ? ['open', 'expanded'] : ['closed'];
 }
 
-@updateClassListHost({ root: 'shadow' })
+@updateClassListHost()
 updateHostClasses() {
   return ['visible'];
 }
@@ -945,7 +1139,7 @@ updateHostClasses() {
 
 ### Dependency Injection & Singleton
 
-#### 20. `@Sim`
+#### 22. `@Sim`
 Marks a class as a **Singleton** in the `<swc-app>` DI container for **constructor injection**.
 
 **Two DI Mechanisms:**

package/dist/cjs/decorators/applyNode.js

@@ -43,6 +43,7 @@ __export(applyNode_exports, {
 module.exports = __toCommonJS(applyNode_exports);
 var import_core = require("@dooboostore/core");
 var import_elementDefine = require("./elementDefine");
+var import_Utils = require("../utils/Utils");
 const APPLY_NODE_METADATA_KEY = Symbol("simple-web-component:apply-node");
 const normalizeNodes = (res, doc) => {
   const items = Array.isArray(res) ? res : [res];
@@ -71,15 +72,20 @@ function applyNode(selector, options = { position: "beforeEnd" }) {
         const currentDoc = currentWin.document;
         const pos = options.position || "beforeEnd";
         const r = options.root || "auto";
-        const getTargetRoot = () => {
+        const applyRoot = (t) => {
+          if (!t || !(t instanceof HTMLElement))
+            return t;
+          if (r === "auto")
+            return t.shadowRoot || t;
           if (r === "shadow")
-            return this.shadowRoot;
+            return t.shadowRoot;
           if (r === "light")
-            return this;
+            return t;
           if (r === "all")
-            return this.shadowRoot || this;
-          return this.shadowRoot || this;
+            return t.shadowRoot || t;
+          return t;
         };
+        const hostSet = import_Utils.SwcUtils.getHostSet(this);
         if (pos === "remove") {
           if (res) {
             if (selector === ":host" || !selector) {
@@ -89,7 +95,7 @@ function applyNode(selector, options = { position: "beforeEnd" }) {
                 this.remove();
               }
             } else {
-              const targetRoot = getTargetRoot();
+              const targetRoot = applyRoot(this);
               if (targetRoot) {
                 const targets = targetRoot.querySelectorAll(selector);
                 targets.forEach((el) => el.remove());
@@ -98,14 +104,22 @@ function applyNode(selector, options = { position: "beforeEnd" }) {
           }
         } else {
           let targetEl = null;
-          if (selector === ":host" || !selector) {
-            if (r === "shadow") {
-              targetEl = this.shadowRoot;
-            } else {
-              targetEl = this;
-            }
+          if (selector === ":host") {
+            targetEl = applyRoot(this);
+          } else if (selector === ":parentHost") {
+            targetEl = applyRoot(hostSet.$parentHost);
+          } else if (selector === ":appHost") {
+            targetEl = applyRoot(hostSet.$appHost);
+          } else if (selector === ":firstHost") {
+            targetEl = applyRoot(hostSet.$firstHost);
+          } else if (selector === ":lastHost") {
+            targetEl = applyRoot(hostSet.$lastHost);
+          } else if (selector === ":firstAppHost") {
+            targetEl = applyRoot(hostSet.$firstHost);
+          } else if (selector === ":lastAppHost") {
+            targetEl = applyRoot(hostSet.$lastAppHost);
           } else {
-            const targetRoot = getTargetRoot();
+            const targetRoot = applyRoot(this);
             targetEl = targetRoot ? targetRoot.querySelector(selector) : null;
           }
           if (targetEl) {
@@ -150,25 +164,106 @@ const findAllApplyNodeMetadata = (target) => {
   });
   return result;
 };
-function applyNodeHost(options = { position: "beforeEnd" }) {
-  return applyNode(":host", options);
-}
-const applyBeforeBeginNode = (selector, options = {}) => applyNode(selector, { ...options, position: "beforeBegin" });
-const applyAfterBeginNode = (selector, options = {}) => applyNode(selector, { ...options, position: "afterBegin" });
-const applyBeforeEndNode = (selector, options = {}) => applyNode(selector, { ...options, position: "beforeEnd" });
-const applyAfterEndNode = (selector, options = {}) => applyNode(selector, { ...options, position: "afterEnd" });
-const applyReplaceNode = (selector, options = {}) => applyNode(selector, { ...options, position: "replace" });
-const applyReplaceChildrenNode = (selector, options = {}) => applyNode(selector, { ...options, position: "replaceChildren" });
-const applyInnerHtmlNode = (selector, options = {}) => applyNode(selector, { ...options, position: "innerHtml" });
-const applyInnerTextNode = (selector, options = {}) => applyNode(selector, { ...options, position: "innerText" });
-const applyRemoveNode = (selector, options = {}) => applyNode(selector, { ...options, position: "remove" });
-const applyBeforeBeginNodeHost = (options = {}) => applyNode(":host", { ...options, position: "beforeBegin" });
-const applyAfterBeginNodeHost = (options = {}) => applyNode(":host", { ...options, position: "afterBegin" });
-const applyBeforeEndNodeHost = (options = {}) => applyNode(":host", { ...options, position: "beforeEnd" });
-const applyAfterEndNodeHost = (options = {}) => applyNode(":host", { ...options, position: "afterEnd" });
-const applyReplaceNodeHost = (options = {}) => applyNode(":host", { ...options, position: "replace" });
-const applyReplaceChildrenNodeHost = (options = {}) => applyNode(":host", { ...options, position: "replaceChildren" });
-const applyInnerHtmlNodeHost = (options = {}) => applyNode(":host", { ...options, position: "innerHtml" });
-const applyInnerTextNodeHost = (options = {}) => applyNode(":host", { ...options, position: "innerText" });
-const applyRemoveNodeHost = (options = {}) => applyNode(":host", { ...options, position: "remove" });
+function applyNodeHost(targetOrOptions, propertyKey, descriptor) {
+  console.log("vvvvv");
+  if (propertyKey !== void 0 && typeof propertyKey === "string" || typeof propertyKey === "symbol") {
+    return applyNode(":host", { position: "beforeEnd" })(targetOrOptions, propertyKey, descriptor);
+  }
+  if (typeof targetOrOptions === "object" && targetOrOptions !== null) {
+    const options = targetOrOptions;
+    return applyNode(":host", { ...options, position: options.position || "beforeEnd" });
+  } else {
+    return applyNode(":host", { position: "beforeEnd" });
+  }
+}
+function applyBeforeBeginNode(selector, options) {
+  return applyNode(selector, { ...options, position: "beforeBegin" });
+}
+function applyAfterBeginNode(selector, options) {
+  return applyNode(selector, { ...options, position: "afterBegin" });
+}
+function applyBeforeEndNode(selector, options) {
+  return applyNode(selector, { ...options, position: "beforeEnd" });
+}
+function applyAfterEndNode(selector, options) {
+  return applyNode(selector, { ...options, position: "afterEnd" });
+}
+function applyReplaceNode(selector, options) {
+  return applyNode(selector, { ...options, position: "replace" });
+}
+function applyReplaceChildrenNode(selector, options) {
+  return applyNode(selector, { ...options, position: "replaceChildren" });
+}
+function applyInnerHtmlNode(selector, options) {
+  return applyNode(selector, { ...options, position: "innerHtml" });
+}
+function applyInnerTextNode(selector, options) {
+  return applyNode(selector, { ...options, position: "innerText" });
+}
+function applyRemoveNode(selector, options) {
+  return applyNode(selector, { ...options, position: "remove" });
+}
+function applyBeforeBeginNodeHost(targetOrOptions, propertyKey, descriptor) {
+  if (propertyKey !== void 0) {
+    const decorator = applyNode(":host", { position: "beforeBegin" });
+    return decorator(targetOrOptions, propertyKey, descriptor);
+  }
+  return applyNode(":host", { ...targetOrOptions || {}, position: "beforeBegin" });
+}
+function applyAfterBeginNodeHost(optionsOrTarget, propertyKey, descriptor) {
+  if (propertyKey !== void 0) {
+    const decorator = applyNode(":host", { position: "afterBegin" });
+    return decorator(optionsOrTarget, propertyKey, descriptor);
+  }
+  return applyNode(":host", { ...optionsOrTarget || {}, position: "afterBegin" });
+}
+function applyBeforeEndNodeHost(optionsOrTarget, propertyKey, descriptor) {
+  if (propertyKey !== void 0) {
+    const decorator = applyNode(":host", { position: "beforeEnd" });
+    return decorator(optionsOrTarget, propertyKey, descriptor);
+  }
+  return applyNode(":host", { ...optionsOrTarget || {}, position: "beforeEnd" });
+}
+function applyAfterEndNodeHost(optionsOrTarget, propertyKey, descriptor) {
+  if (propertyKey !== void 0) {
+    const decorator = applyNode(":host", { position: "afterEnd" });
+    return decorator(optionsOrTarget, propertyKey, descriptor);
+  }
+  return applyNode(":host", { ...optionsOrTarget || {}, position: "afterEnd" });
+}
+function applyReplaceNodeHost(optionsOrTarget, propertyKey, descriptor) {
+  if (propertyKey !== void 0) {
+    const decorator = applyNode(":host", { position: "replace" });
+    return decorator(optionsOrTarget, propertyKey, descriptor);
+  }
+  return applyNode(":host", { ...optionsOrTarget || {}, position: "replace" });
+}
+function applyReplaceChildrenNodeHost(optionsOrTarget, propertyKey, descriptor) {
+  if (propertyKey !== void 0) {
+    const decorator = applyNode(":host", { position: "replaceChildren" });
+    return decorator(optionsOrTarget, propertyKey, descriptor);
+  }
+  return applyNode(":host", { ...optionsOrTarget || {}, position: "replaceChildren" });
+}
+function applyInnerHtmlNodeHost(optionsOrTarget, propertyKey, descriptor) {
+  if (propertyKey !== void 0) {
+    const decorator = applyNode(":host", { position: "innerHtml" });
+    return decorator(optionsOrTarget, propertyKey, descriptor);
+  }
+  return applyNode(":host", { ...optionsOrTarget || {}, position: "innerHtml" });
+}
+function applyInnerTextNodeHost(optionsOrTarget, propertyKey, descriptor) {
+  if (propertyKey !== void 0) {
+    const decorator = applyNode(":host", { position: "innerText" });
+    return decorator(optionsOrTarget, propertyKey, descriptor);
+  }
+  return applyNode(":host", { ...optionsOrTarget || {}, position: "innerText" });
+}
+function applyRemoveNodeHost(optionsOrTarget, propertyKey, descriptor) {
+  if (propertyKey !== void 0) {
+    const decorator = applyNode(":host", { position: "remove" });
+    return decorator(optionsOrTarget, propertyKey, descriptor);
+  }
+  return applyNode(":host", { ...optionsOrTarget || {}, position: "remove" });
+}
 //# sourceMappingURL=applyNode.js.map