@dooboostore/simple-web-component 1.0.6 → 1.0.8

package/README.md

@@ -1,14 +1,14 @@
 # @dooboostore/simple-web-component
 
-A ultra-lightweight, high-performance Web Component library that brings **Modern Reactivity** to **Standard Web Technologies**. Build complex, nested UIs using native Shadow DOM, Slots, and MutationObservers without the overhead of a Virtual DOM.
+An ultra-lightweight, high-performance Web Component library that brings **Modern Reactivity** to **Standard Web Technologies**. Build complex, high-performance UIs using native Shadow DOM, Slots, and MutationObservers without the overhead of a Virtual DOM.
 
-## 🚀 Key Features
+## 🚀 Key Advantages
 
-- **Standard-First**: Uses the native `is` attribute to enhance standard HTML tags (`ul`, `table`, `div`, etc.). Your markup stays clean and semantic.
 - **Surgical Updates**: Powered by Proxy-based reactivity. It updates only the specific **Text Nodes or Attributes** bound to data—no full-tree diffing.
-- **Deep Reactivity**: The `@state` decorator detects changes deep inside objects and arrays automatically.
-- **Hybrid Rendering**: Seamlessly combine **Shadow DOM** (for encapsulation) and **Light DOM** (for slotting and SEO) in a single component.
-- **Scoped Context (`as`)**: Perfectly isolate data between parent and child components using explicit aliases.
+- **Standard-First**: Keep your HTML semantic. Use the native `is` attribute to enhance standard tags (`ul`, `table`, `div`, etc.).
+- **Zero Boilerplate**: Define queries, events, and lifecycles declaratively using decorators.
+- **Scoped Context (`as`)**: Effortlessly isolate and share data between parent and child components using explicit aliases.
+- **Hybrid Rendering**: Seamlessly combine **Shadow DOM** and **Light DOM** in a single component.
 
 ---
 
@@ -18,132 +18,209 @@ A ultra-lightweight, high-performance Web Component library that brings **Modern
 pnpm add @dooboostore/simple-web-component
 ```
 
-### Safari Support (Essential)
-Safari does not natively support "Customized Built-in Elements". You **must** include the polyfill at the top of your entry point:
-
+### Safari Support (Required)
+Include this polyfill at the very top of your entry point to support the `is` attribute in Safari:
 ```javascript
 import '@ungap/custom-elements';
+import 'reflect-metadata';
 ```
 
 ---
 
-## 💡 Practical Examples
+## 💡 Practical Showcase
 
-### 1. Complex Nesting & Scoped Context (`as`)
-Avoid naming collisions by aliasing your components. Access parent data from children using the same alias.
+### 1. Basic Reactive Component
+A counter where only the number part is updated in the DOM when you click.
 
 ```typescript
-@elementDefine({ name: 'parent-comp' })
-class Parent extends HTMLElement {
-  @state count = 10;
+import { elementDefine, innerHtml, state, addEventListener } from '@dooboostore/simple-web-component';
+
+@elementDefine('my-counter')
+class MyCounter extends HTMLElement {
+  @state count = 0;
+
   @innerHtml({ useShadow: true })
   render() {
     return `
-      <div>Parent Count: {{t1.count}}</div>
-      <slot></slot>
+      <p>Count: <strong>{{count}}</strong></p>
+      <button id="inc"> +1 </button>
     `;
   }
+
+  @addEventListener({ type: 'click', query: '#inc' })
+  onInc() {
+    this.count++; // 👈 Surgical Update!
+  }
+}
+```
+
+### 2. Nested Scopes with `as="alias"`
+Access parent data from deeply nested children without naming collisions.
+
+```typescript
+@elementDefine({ name: 'parent-comp' })
+class Parent extends HTMLElement {
+  @state user = { name: 'Alice', score: 100 };
+  @innerHtml({ useShadow: true })
+  render() { return `<h3>User: {{p.user.name}}</h3><slot></slot>`; }
 }
 
 @elementDefine({ name: 'child-comp' })
 class Child extends HTMLElement {
-  @state count = 0;
+  @state score = 0;
   @innerHtml({ useShadow: true })
   render() {
     return `
-      <div>Child Count: {{t2.count}}</div>
-      <div>Parent's Count via Alias: {{t1.count}}</div>
+      <div>Child Score: {{c.score}}</div>
+      <div>Parent's Score: {{p.user.score}}</div> <!-- 👈 Scoped Access -->
     `;
   }
 }
 ```
-
 ```html
-<parent-comp as="t1">
-  <child-comp as="t2"></child-comp>
+<!-- HTML Usage -->
+<parent-comp as="p">
+  <child-comp as="c"></child-comp>
 </parent-comp>
 ```
 
-### 2. High-Performance Looping (`swc-for-of`)
-Render thousands of items efficiently. Keeps your native `ul > li` or `tbody > tr` structure intact.
+### 3. Mixed Shadow & Light DOM Rendering
+You can distribute templates across both Shadow and Light DOM in a single component.
 
-```html
-<ul is="swc-for-of-ul" id="my-list" as="item" as-index="i">
-  <li class="user-row">
-    <strong>#{{i}}</strong>: {{item.name}}
-    <button onbtn-click="alert($data.id)">Select</button>
-  </li>
-</ul>
+```typescript
+@elementDefine({ name: 'hybrid-comp' })
+class HybridComp extends HTMLElement {
+  @innerHtml({ useShadow: true })
+  renderShadow() {
+    return `<div style="border: 1px solid blue;"><slot></slot></div>`;
+  }
 
-<script>
-  const list = document.querySelector('#my-list');
-  list.swcValue = [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }];
-  
-  // Surgical Update: only the 3rd row is created and appended.
-  list.swcValue.push({ id: 3, name: 'Charlie' }); 
-</script>
+  @innerHtml
+  renderLight() {
+    return `<p>I am in the Light DOM!</p>`;
+  }
+}
 ```
 
-### 3. Surgical Object Binding (`swc-object`)
-Bind a complex object to a template. Updates happen instantly when properties change.
+---
 
-```html
-<div is="swc-object-div" id="profile" as="u">
-  <img src="{{u.avatarUrl}}" alt="{{u.name}}'s avatar">
-  <h3>{{u.name}}</h3>
-  <p>Status: {{u.status}}</p>
-</div>
+## 📑 Decorator Deep Dive
+
+### `@elementDefine(config)`
+Registers the class as a Custom Element.
+- `name`: (Required) Tag name.
+- `extends`: (Optional) Native tag to extend (e.g., `'ul'`).
+- `autoRemoveEventListeners`: (Optional) Auto-cleanup on disconnect.
+
+### `@innerHtml(options?)`
+Defines markup. Supports **Async (Promises)**.
+- `root`: `'shadow'` (Shadow DOM) or `'light'` (Light DOM). Default depends on `useShadow`.
+- `useShadow`: Shortcut to set `root: 'shadow'`.
+
+### `@state(alias?)`
+Declares a property as reactive. Tracks changes in nested objects/arrays.
+- `alias`: Custom name for templates (e.g. `{{alias.path}}`).
+
+### `@attribute(options?)`
+Syncs property with HTML attribute.
+- `name`: HTML attribute name.
+- `type`: `String`, `Number`, `Boolean`, `Object`.
+- `disableReflect`: If `true`, stops JS -> HTML sync. Default is `false`.
+
+### `@query(selector?, options?)`
+Lazy-loads elements from the DOM.
+- `selector`: CSS selector. If omitted, targets the **Host**.
+- `root`: `'shadow' | 'light' | 'all' | 'auto'` (Default: `'auto'`).
+
+### `@addEventListener(options)`
+Declarative event binding. Method receives `(event, targetElement)`.
+- `type`: Event type.
+- `query`: CSS selector. Omit to bind to **Host**.
+- `root`: `'shadow' | 'light' | 'all' | 'auto'`.
+- `stopPropagation`, `preventDefault`, `stopImmediatePropagation`: Event modifiers.
 
-<script>
-  const el = document.querySelector('#profile');
-  el.swcValue = { name: 'Dev', status: 'Online', avatarUrl: '...' };
-  
-  // Surgical Update: Only the <p> text changes.
-  el.swcValue.status = 'Busy'; 
-</script>
-```
+---
+
+## ⏳ Lifecycle Hooks
+Provides 6-stage hooks for precise control. Multiple methods per hook are supported.
+
+| Hook | Timing |
+| :--- | :--- |
+| **`@onBeforeConnected`** | Before template injection. |
+| **`@onAfterConnected`** | After injection (Alias: **`@onConnected`**). |
+| **`@onBeforeDisconnected`**| Before element removal. |
+| **`@onAfterDisconnected`** | After removal and cleanup (Alias: **`@onDisconnected`**). |
+| **`@onAttributeChanged(key)`**| When an attribute (or `*` wildcard) changes. |
+| **`@onAddEventListener`** | Called when a listener is attached via `@addEventListener`. |
 
 ---
 
-## 📑 API Reference
+## 🛠 Built-in Logic Components (`is` Variants)
 
-### Core Decorators
+Enhance any standard HTML tag with logic using the `is` attribute. Use **`swcValue`** to bind data.
 
-| Decorator | Target | Description |
-| :--- | :--- | :--- |
-| `@elementDefine(config)` | Class | Registers the component. `config: { name, extends, autoRemoveEventListeners }`. |
-| `@innerHtml(options)` | Method | Defines HTML content. `options: { useShadow }`. Can be used multiple times to combine templates. |
-| `@state` | Field | Declares a reactive property. Triggers surgical updates on change. Supports `@state('alias')`. |
-| `@attribute(options)` | Field | Syncs class property with HTML attribute. `options: { name, type, disableReflect }`. |
-| `@query(selector)` | Field/Method | Lazy-loads an element. Can be used as a property or a callback method. |
-| `@addEventListener(opts)`| Method | Declarative event binding. Automatically re-binds if DOM changes. |
-| `@emitCustomEvent(type)` | Method | Dispatches a `CustomEvent`. 리턴값은 부모 템플릿의 `$data`로 전달됩니다. |
+### 1. Looping (`swc-for-of-[tag]`)
+High-performance rendering that keeps your markup structure.
+```html
+<ul is="swc-for-of-ul" swcValue="{{items}}" as="item" as-index="i">
+  <li>{{i}}. {{item.name}}</li>
+</ul>
+```
 
-### Lifecycle Hooks
+### 2. Conditionals (`swc-if-[tag]`)
+Elements are physically added/removed from the DOM tree.
+```html
+<div is="swc-if-div" swcValue="{{isVisible}}">
+  <p>Now you see me!</p>
+</div>
+```
 
-Every hook supports **multiple methods** per component.
+### 3. Branching (`swc-choose-[tag]`)
+Switch-case style logic with physical element swapping.
+```html
+<div is="swc-choose-div" swcValue="{{status}}">
+  <span is="swc-when-span" test="loading">Loading...</span>
+  <span is="swc-when-span" test="error">Error!</span>
+  <div is="swc-other-div">Success!</div>
+</div>
+```
 
-| Hook | Timing |
-| :--- | :--- |
-| `@onBeforeConnected` | Before content is injected. |
-| `@onAfterConnected` | After content injection and binding (Alias: `@onConnected`). |
-| `@onBeforeDisconnected`| Before the element is removed. |
-| `@onAfterDisconnected` | After removal and auto-cleanup (Alias: `@onDisconnected`). |
-| `@onAttributeChanged(key)`| When a specific (or wildcard `*`) attribute changes. |
-| `@onAddEventListener` | Callback when any `@addEventListener` is triggered. |
+### 4. Object Binding (`swc-object-[tag]`)
+Binds a single object surgically to any tag.
+```html
+<div is="swc-object-div" swcValue="{{user}}" as="u">
+  <h3>{{u.name}}</h3>
+</div>
+```
 
 ---
 
-## 🛠 Built-in Logic Components (`is` variants)
+## 📜 Full Feature Integration Example
 
-Every standard HTML tag has logic variants. The naming pattern is `swc-[logic]-[tag]`.
+```typescript
+@elementDefine('app-root')
+class AppRoot extends HTMLElement {
+  @state profile = { name: 'John', loggedIn: true };
 
-- **ForOf**: `swc-for-of-ul`, `swc-for-of-tbody`, `swc-for-of-div` ...
-- **If**: `swc-if-div`, `swc-if-span`, `swc-if-section` ...
-- **Choose**: `swc-choose-div`, `swc-choose-section` ...
-- **Object**: `swc-object-div`, `swc-object-article` ...
+  @onConnected
+  init() { console.log('App Started'); }
 
----
+  @innerHtml({ useShadow: true })
+  render() {
+    return `
+      <div is="swc-if-div" swcValue="{{profile.loggedIn}}">
+        <h1>Welcome, {{profile.name}}!</h1>
+        <button id="logout">Logout</button>
+      </div>
+    `;
+  }
+
+  @addEventListener({ type: 'click', query: '#logout' })
+  onLogout() {
+    this.profile.loggedIn = false; // Surgical UI disappearance
+  }
+}
+```
 
-## 📜 License
+## License
 MIT

package/dist/cjs/decorators/addEventListener.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/decorators/addEventListener.ts"],
-  "sourcesContent": ["import { ReflectUtils } from '@dooboostore/core/reflect/ReflectUtils';\n\nexport interface AddEventListenerOptions extends EventListenerOptions {\n  query?: string;\n  type: string;\n  useShadow?: boolean;\n  capture?: boolean;\n  once?: boolean;\n  passive?: boolean;\n  stopPropagation?: boolean;\n  stopImmediatePropagation?: boolean;\n  preventDefault?: boolean;\n}\n\nexport interface AddEventListenerMetadata {\n  options: AddEventListenerOptions;\n  propertyKey: string | symbol;\n}\n\nexport const ADD_EVENT_LISTENER_METADATA_KEY = Symbol('simple-web-component:add-event-listener');\n\nexport function addEventListener(type: string, query?: string): MethodDecorator;\nexport function addEventListener(options: AddEventListenerOptions): MethodDecorator;\nexport function addEventListener(arg1: string | AddEventListenerOptions, arg2?: string): MethodDecorator {\n  return (target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor) => {\n    const constructor = target.constructor;\n    const options: AddEventListenerOptions = typeof arg1 === 'string' ? { type: arg1, query: arg2 } : arg1;\n\n    let listeners = ReflectUtils.getMetadata<AddEventListenerMetadata[]>(ADD_EVENT_LISTENER_METADATA_KEY, constructor);\n    if (!listeners) {\n      listeners = [];\n      ReflectUtils.defineMetadata(ADD_EVENT_LISTENER_METADATA_KEY, listeners, constructor);\n    }\n    listeners.push({ options, propertyKey });\n  };\n}\n\nexport const getAddEventListenerMetadata = (target: any): AddEventListenerMetadata[] | undefined => {\n  const constructor = target instanceof Function ? target : target.constructor;\n  return ReflectUtils.getMetadata(ADD_EVENT_LISTENER_METADATA_KEY, constructor);\n};\n"],
+  "sourcesContent": ["import { ReflectUtils } from '@dooboostore/core/reflect/ReflectUtils';\n\nexport interface AddEventListenerOptions extends EventListenerOptions {\n  query?: string;\n  type: string;\n  root?: 'light' | 'shadow' | 'all' | 'auto';\n  capture?: boolean;\n  once?: boolean;\n  passive?: boolean;\n  stopPropagation?: boolean;\n  stopImmediatePropagation?: boolean;\n  preventDefault?: boolean;\n}\n\nexport interface AddEventListenerMetadata {\n  options: AddEventListenerOptions;\n  propertyKey: string | symbol;\n}\n\nexport const ADD_EVENT_LISTENER_METADATA_KEY = Symbol('simple-web-component:add-event-listener');\n\nexport function addEventListener(type: string, query?: string): MethodDecorator;\nexport function addEventListener(options: AddEventListenerOptions): MethodDecorator;\nexport function addEventListener(arg1: string | AddEventListenerOptions, arg2?: string): MethodDecorator {\n  return (target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor) => {\n    const constructor = target.constructor;\n    const options: AddEventListenerOptions = typeof arg1 === 'string' ? { type: arg1, query: arg2 } : arg1;\n\n    let listeners = ReflectUtils.getMetadata<AddEventListenerMetadata[]>(ADD_EVENT_LISTENER_METADATA_KEY, constructor);\n    if (!listeners) {\n      listeners = [];\n      ReflectUtils.defineMetadata(ADD_EVENT_LISTENER_METADATA_KEY, listeners, constructor);\n    }\n    listeners.push({ options, propertyKey });\n  };\n}\n\nexport const getAddEventListenerMetadata = (target: any): AddEventListenerMetadata[] | undefined => {\n  const constructor = target instanceof Function ? target : target.constructor;\n  return ReflectUtils.getMetadata(ADD_EVENT_LISTENER_METADATA_KEY, constructor);\n};\n"],
   "mappings": ";;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAA6B;AAmBtB,MAAM,kCAAkC,OAAO,yCAAyC;AAIxF,SAAS,iBAAiB,MAAwC,MAAgC;AACvG,SAAO,CAAC,QAAgB,aAA8B,eAAmC;AACvF,UAAM,cAAc,OAAO;AAC3B,UAAM,UAAmC,OAAO,SAAS,WAAW,EAAE,MAAM,MAAM,OAAO,KAAK,IAAI;AAElG,QAAI,YAAY,iCAAa,YAAwC,iCAAiC,WAAW;AACjH,QAAI,CAAC,WAAW;AACd,kBAAY,CAAC;AACb,uCAAa,eAAe,iCAAiC,WAAW,WAAW;AAAA,IACrF;AACA,cAAU,KAAK,EAAE,SAAS,YAAY,CAAC;AAAA,EACzC;AACF;AAEO,MAAM,8BAA8B,CAAC,WAAwD;AAClG,QAAM,cAAc,kBAAkB,WAAW,SAAS,OAAO;AACjE,SAAO,iCAAa,YAAY,iCAAiC,WAAW;AAC9E;",
   "names": []
 }

package/dist/cjs/decorators/elementDefine.js

@@ -161,19 +161,37 @@ const elementDefine = (inConfig) => (constructor) => {
     }
     _syncDecorators() {
       this._buildStateMap();
+      const getSearchRoots = (rootOption) => {
+        const roots = [];
+        if (rootOption === "shadow") {
+          if (this.shadowRoot) roots.push(this.shadowRoot);
+        } else if (rootOption === "light") {
+          roots.push(this);
+        } else if (rootOption === "all") {
+          if (this.shadowRoot) roots.push(this.shadowRoot);
+          roots.push(this);
+        } else {
+          roots.push(this.shadowRoot || this);
+        }
+        return roots;
+      };
       const queryMetadata = (0, import_query.getQueryMetadata)(this);
       if (queryMetadata) {
         queryMetadata.filter((it) => it.isMethod).forEach((it) => {
-          const root = it.options.useShadow !== false && this.shadowRoot ? this.shadowRoot : this;
-          const element = root.querySelector(it.selector);
-          if (element) {
-            let bound = this._boundElements.get(element);
+          const searchRoots = getSearchRoots(it.options.root);
+          let foundEl = null;
+          for (const root of searchRoots) {
+            foundEl = it.selector ? root.querySelector(it.selector) : this;
+            if (foundEl) break;
+          }
+          if (foundEl) {
+            let bound = this._boundElements.get(foundEl);
             if (!bound) {
               bound = /* @__PURE__ */ new Set();
-              this._boundElements.set(element, bound);
+              this._boundElements.set(foundEl, bound);
             }
             if (!bound.has(it.propertyKey)) {
-              this[it.propertyKey](element);
+              this[it.propertyKey](foundEl);
               bound.add(it.propertyKey);
             }
           }
@@ -182,48 +200,52 @@ const elementDefine = (inConfig) => (constructor) => {
       const queryAllMetadata = (0, import_queryAll.getQueryAllMetadata)(this);
       if (queryAllMetadata) {
         queryAllMetadata.filter((it) => it.isMethod).forEach((it) => {
-          const root = it.options.useShadow !== false && this.shadowRoot ? this.shadowRoot : this;
-          const elements = root.querySelectorAll(it.selector);
-          this[it.propertyKey](elements);
+          const searchRoots = getSearchRoots(it.options.root);
+          const allElements = [];
+          searchRoots.forEach((root) => {
+            const found = it.selector ? root.querySelectorAll(it.selector) : [this];
+            allElements.push(...Array.from(found));
+          });
+          this[it.propertyKey](allElements);
         });
       }
       const eventListeners = (0, import_addEventListener.getAddEventListenerMetadata)(this);
       if (eventListeners) {
         eventListeners.forEach((it) => {
-          const { query, type, useShadow, ...options } = it.options;
-          const root = useShadow !== false && this.shadowRoot ? this.shadowRoot : this;
-          const targetElements = query ? root.querySelectorAll(query) : [this];
-          targetElements.forEach((targetElement) => {
-            if (targetElement) {
-              let bound = this._boundElements.get(targetElement);
-              if (!bound) {
-                bound = /* @__PURE__ */ new Set();
-                this._boundElements.set(targetElement, bound);
+          const { query, type, root: rootOption, ...options } = it.options;
+          const searchRoots = getSearchRoots(rootOption);
+          searchRoots.forEach((root) => {
+            const targetElements = query ? root.querySelectorAll(query) : [this];
+            targetElements.forEach((targetElement) => {
+              if (targetElement) {
+                let bound = this._boundElements.get(targetElement);
+                if (!bound) {
+                  bound = /* @__PURE__ */ new Set();
+                  this._boundElements.set(targetElement, bound);
+                }
+                const eventKey = `event:${String(it.propertyKey)}:${type}`;
+                if (!bound.has(eventKey)) {
+                  const handler = (event) => {
+                    if (it.options.stopImmediatePropagation) event.stopImmediatePropagation();
+                    if (it.options.stopPropagation) event.stopPropagation();
+                    if (it.options.preventDefault) event.preventDefault();
+                    this[it.propertyKey](event, targetElement);
+                  };
+                  targetElement.addEventListener(type, handler, options);
+                  bound.add(eventKey);
+                  if (config.autoRemoveEventListeners) this._activeListeners.push({ el: targetElement, type, handler, options });
+                  const addEventMethods = (0, import_lifecycles.getLifecycleMetadata)(this, import_lifecycles.ON_ADD_EVENT_LISTENER_METADATA_KEY);
+                  addEventMethods?.forEach((m) => {
+                    if (typeof this[m] === "function") this[m](targetElement, type, handler);
+                  });
+                }
               }
-              const eventKey = `event:${String(it.propertyKey)}:${type}`;
-              if (!bound.has(eventKey)) {
-                const handler = (event) => {
-                  if (it.options.stopImmediatePropagation) event.stopImmediatePropagation();
-                  if (it.options.stopPropagation) event.stopPropagation();
-                  if (it.options.preventDefault) event.preventDefault();
-                  this[it.propertyKey](event, targetElement);
-                };
-                targetElement.addEventListener(type, handler, options);
-                bound.add(eventKey);
-                if (config.autoRemoveEventListeners) this._activeListeners.push({ el: targetElement, type, handler, options });
-                const addEventMethods = (0, import_lifecycles.getLifecycleMetadata)(this, import_lifecycles.ON_ADD_EVENT_LISTENER_METADATA_KEY);
-                addEventMethods?.forEach((m) => {
-                  if (typeof this[m] === "function") this[m](targetElement, type, handler);
-                });
-              }
-            }
+            });
           });
         });
       }
     }
     _buildStateMap() {
-      this._stateBindings.clear();
-      this._externalSources.clear();
       const scan = (root) => {
         const walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT);
         let node = null;
@@ -232,7 +254,7 @@ const elementDefine = (inConfig) => (constructor) => {
           else if (node.nodeType === Node.ELEMENT_NODE) {
             const el = node;
             const alias = el.getAttribute("as");
-            if (alias) {
+            if (alias && !this._externalSources.has(alias)) {
               this._externalSources.set(alias, el);
               el.addEventListener(STATE_CHANGE_EVENT, () => this._updateState(alias));
             }
@@ -244,9 +266,12 @@ const elementDefine = (inConfig) => (constructor) => {
       scan(this);
     }
     _parseAndBind(node, type, owner) {
-      const content = node.textContent || "";
+      const tplKey = `__swc_original_${this._swcId}`;
+      const isAlreadyBound = node.__swc_bound_ids?.has(this._swcId);
+      const content = node[tplKey] || node.textContent || "";
       const matches = Array.from(content.matchAll(/{{(.*?)}}/g));
       if (matches.length === 0) return;
+      if (isAlreadyBound) return;
       matches.forEach((match) => {
         const fullPath = match[1].trim();
         const rootName = fullPath.split(".")[0];
@@ -256,8 +281,9 @@ const elementDefine = (inConfig) => (constructor) => {
         const isSelfAlias = this.getAttribute("as") === rootName;
         if (!isState && !isLogicKey && !isExternal && !isSelfAlias) return;
         if (!this._stateBindings.has(rootName)) this._stateBindings.set(rootName, []);
-        const tplKey = `__swc_original_${this._swcId}`;
         if (!node[tplKey]) node[tplKey] = content;
+        if (!node.__swc_bound_ids) node.__swc_bound_ids = /* @__PURE__ */ new Set();
+        node.__swc_bound_ids.add(this._swcId);
         this._stateBindings.get(rootName).push({ node, type, owner, path: fullPath });
         this._updateState(rootName);
       });
@@ -275,7 +301,9 @@ const elementDefine = (inConfig) => (constructor) => {
       const tplKey = `__swc_original_${this._swcId}`;
       bindings.forEach((bin) => {
         let text = bin.node[tplKey];
+        if (!text) return;
         const matches = Array.from(text.matchAll(/{{(.*?)}}/g));
+        let updatedText = text;
         for (const match of matches) {
           const path = match[1].trim();
           const root = path.split(".")[0];
@@ -307,14 +335,20 @@ const elementDefine = (inConfig) => (constructor) => {
           }
           if (val !== void 0) {
             const strVal = val === null || val === void 0 ? "" : typeof val === "object" ? "[Object]" : String(val);
-            text = text.replace(match[0], strVal);
+            updatedText = updatedText.replace(match[0], strVal);
             if (bin.type === "attribute" && bin.owner) {
-              if (val === null || val === void 0) bin.owner.removeAttribute(bin.attrName);
-              else bin.owner.setAttribute(bin.attrName, text);
+              const attrName = bin.node.name;
+              if (val === null || val === void 0) bin.owner.removeAttribute(attrName);
+              else {
+                bin.owner.setAttribute(attrName, updatedText);
+                if ((attrName === "value" || attrName === "checked") && bin.owner.tagName.match(/INPUT|TEXTAREA|SELECT/)) {
+                  bin.owner[attrName] = updatedText;
+                }
+              }
             }
           }
         }
-        if (bin.type === "text") bin.node.textContent = text;
+        if (bin.type === "text") bin.node.textContent = updatedText;
       });
     }
     disconnectedCallback() {