@dooboostore/simple-web-component 1.0.6 → 1.0.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dooboostore/simple-web-component",
-  "version": "1.0.6",
+  "version": "1.0.8",
   "license": "MIT",
   "type": "module",
   "main": "./dist/cjs/index.js",
@@ -22,7 +22,7 @@
   "bugs": {
     "url": "https://github.com/dooboostore-develop/packages/issues"
   },
-  "homepage": "https://github.com/dooboostore-develop/packages#readme",
+  "homepage": "https://github.com/dooboostore-develop/packages/tree/main/%40dooboostore/simple-web-component",
   "keywords": [
     "front",
     "web-components",
@@ -79,9 +79,9 @@
     "esbuild-plugin-tsc": "^0.5.0",
     "esbuild": "^0.23.0",
     "reflect-metadata": "^0.2.2",
+    "@dooboostore/core-web": "1.0.9",
     "@dooboostore/core": "1.0.28",
-    "@dooboostore/core-node": "1.0.10",
-    "@dooboostore/core-web": "1.0.9"
+    "@dooboostore/core-node": "1.0.10"
   },
   "scripts": {
     "clean": "rm -rf dist",

package/src/decorators/addEventListener.ts

@@ -3,7 +3,7 @@ import { ReflectUtils } from '@dooboostore/core/reflect/ReflectUtils';
 export interface AddEventListenerOptions extends EventListenerOptions {
   query?: string;
   type: string;
-  useShadow?: boolean;
+  root?: 'light' | 'shadow' | 'all' | 'auto';
   capture?: boolean;
   once?: boolean;
   passive?: boolean;

package/src/decorators/elementDefine.ts

@@ -125,15 +125,19 @@ export const elementDefine =
 
       constructor(...args: any[]) {
         super(...args);
+
         if (stateList) {
           stateList.forEach(meta => {
             const key = meta.propertyKey;
             const stateName = meta.options.name!;
+
+            // 필드 초기화로 덮어씌워지기 전/후의 값을 확실히 낚아챔
             const initialVal = (this as any)[key];
             this._internalStates.set(
               key,
               SwcUtils.createReactiveProxy(initialVal, () => this._updateState(stateName))
             );
+
             Object.defineProperty(this, key, {
               get: () => this._internalStates.get(key),
               set: newVal => {
@@ -149,6 +153,7 @@ export const elementDefine =
             });
           });
         }
+
         const innerHtmlList = getInnerHtmlMetadataList(this);
         if (innerHtmlList?.some(it => it.options.useShadow === true) && !this.shadowRoot) {
           this.attachShadow({ mode: 'open' });
@@ -157,74 +162,100 @@ export const elementDefine =
 
       private _syncDecorators() {
         this._buildStateMap();
+        const getSearchRoots = (rootOption?: string): Node[] => {
+          const roots: Node[] = [];
+          if (rootOption === 'shadow') {
+            if (this.shadowRoot) roots.push(this.shadowRoot);
+          } else if (rootOption === 'light') {
+            roots.push(this as any as Node);
+          } else if (rootOption === 'all') {
+            if (this.shadowRoot) roots.push(this.shadowRoot);
+            roots.push(this as any as Node);
+          } else {
+            roots.push(this.shadowRoot || (this as any as Node));
+          }
+          return roots;
+        };
+
         const queryMetadata = 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: Element | null = null;
+              for (const root of searchRoots) {
+                foundEl = it.selector ? (root as HTMLElement).querySelector(it.selector) : (this as any as Element);
+                if (foundEl) break;
+              }
+              if (foundEl) {
+                let bound = this._boundElements.get(foundEl);
                 if (!bound) {
                   bound = new Set();
-                  this._boundElements.set(element, bound);
+                  this._boundElements.set(foundEl, bound);
                 }
                 if (!bound.has(it.propertyKey)) {
-                  (this as any)[it.propertyKey](element);
+                  (this as any)[it.propertyKey](foundEl);
                   bound.add(it.propertyKey);
                 }
               }
             });
         }
+
         const queryAllMetadata = 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 as any)[it.propertyKey](elements);
+              const searchRoots = getSearchRoots(it.options.root);
+              const allElements: Element[] = [];
+              searchRoots.forEach(root => {
+                const found = it.selector ? (root as HTMLElement).querySelectorAll(it.selector) : [this as any as Element];
+                allElements.push(...Array.from(found));
+              });
+              (this as any)[it.propertyKey](allElements);
             });
         }
+
         const eventListeners = 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 as any as Element];
-            targetElements.forEach(targetElement => {
-              if (targetElement) {
-                let bound = this._boundElements.get(targetElement);
-                if (!bound) {
-                  bound = 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 as HTMLElement).querySelectorAll(query) : [this as any as Element];
+              targetElements.forEach(targetElement => {
+                if (targetElement) {
+                  let bound = this._boundElements.get(targetElement);
+                  if (!bound) {
+                    bound = new Set();
+                    this._boundElements.set(targetElement, bound);
+                  }
+                  const eventKey = `event:${String(it.propertyKey)}:${type}`;
+                  if (!bound.has(eventKey)) {
+                    const handler = (event: any) => {
+                      if (it.options.stopImmediatePropagation) event.stopImmediatePropagation();
+                      if (it.options.stopPropagation) event.stopPropagation();
+                      if (it.options.preventDefault) event.preventDefault();
+                      (this as any)[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 = getLifecycleMetadata(this, ON_ADD_EVENT_LISTENER_METADATA_KEY);
+                    addEventMethods?.forEach(m => {
+                      if (typeof (this as any)[m] === 'function') (this as any)[m](targetElement, type, handler);
+                    });
+                  }
                 }
-                const eventKey = `event:${String(it.propertyKey)}:${type}`;
-                if (!bound.has(eventKey)) {
-                  const handler = (event: any) => {
-                    if (it.options.stopImmediatePropagation) event.stopImmediatePropagation();
-                    if (it.options.stopPropagation) event.stopPropagation();
-                    if (it.options.preventDefault) event.preventDefault();
-                    (this as any)[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 = getLifecycleMetadata(this, ON_ADD_EVENT_LISTENER_METADATA_KEY);
-                  addEventMethods?.forEach(m => {
-                    if (typeof (this as any)[m] === 'function') (this as any)[m](targetElement, type, handler);
-                  });
-                }
-              }
+              });
             });
           });
         }
       }
 
       private _buildStateMap() {
-        this._stateBindings.clear();
-        this._externalSources.clear();
+        // 기존 바인딩 맵을 완전히 비우지 않고 유지하면서 새로운 노드만 추가함 (바인딩 소실 방지 핵심)
         const scan = (root: Node) => {
           const walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT);
           let node: Node | null = null;
@@ -233,7 +264,7 @@ export const elementDefine =
             else if (node.nodeType === Node.ELEMENT_NODE) {
               const el = node as HTMLElement;
               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));
               }
@@ -246,20 +277,36 @@ export const elementDefine =
       }
 
       private _parseAndBind(node: Node | Attr, type: 'text' | 'attribute', owner?: HTMLElement) {
-        const content = node.textContent || '';
+        const tplKey = `__swc_original_${this._swcId}`;
+        // 이미 이 인스턴스에 의해 바인딩된 노드라면 스킵 (중복 방지)
+        const isAlreadyBound = (node as any).__swc_bound_ids?.has(this._swcId);
+
+        // 텍스트는 원본 템플릿(tplKey)에서, 없으면 현재 내용에서 추출
+        const content = (node as any)[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];
+
           const isState = stateList?.some(s => s.options.name === rootName);
           const isLogicKey = (this as any)._asKey === rootName || (this as any)._asIndexKey === rootName;
           const isExternal = this._externalSources.has(rootName);
           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 as any)[tplKey]) (node as any)[tplKey] = content;
+
+          // 바인딩 ID 기록
+          if (!(node as any).__swc_bound_ids) (node as any).__swc_bound_ids = new Set();
+          (node as any).__swc_bound_ids.add(this._swcId);
+
           this._stateBindings.get(rootName)!.push({ node, type, owner, path: fullPath });
           this._updateState(rootName);
         });
@@ -277,14 +324,20 @@ export const elementDefine =
         const bindings = this._stateBindings.get(stateName);
         if (!bindings) return;
         const tplKey = `__swc_original_${this._swcId}`;
+
         bindings.forEach(bin => {
           let text = (bin.node as any)[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];
             let val: any = undefined;
             let current: HTMLElement | null = this as any as HTMLElement;
+
             while (current) {
               const currentNewClass = current as any;
               if (current.getAttribute('as') === root) {
@@ -309,16 +362,24 @@ export const elementDefine =
               }
               current = current.parentElement || (current.getRootNode() as any).host;
             }
+
             if (val !== undefined) {
               const strVal = val === null || val === undefined ? '' : 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 === undefined) bin.owner.removeAttribute(bin.attrName!);
-                else bin.owner.setAttribute(bin.attrName!, text);
+                const attrName = (bin.node as Attr).name;
+                if (val === null || val === undefined) bin.owner.removeAttribute(attrName);
+                else {
+                  bin.owner.setAttribute(attrName, updatedText);
+                  if ((attrName === 'value' || attrName === 'checked') && bin.owner.tagName.match(/INPUT|TEXTAREA|SELECT/)) {
+                    (bin.owner as any)[attrName] = updatedText;
+                  }
+                }
               }
             }
           }
-          if (bin.type === 'text') bin.node.textContent = text;
+          if (bin.type === 'text') bin.node.textContent = updatedText;
         });
       }
 

package/src/decorators/query.ts

@@ -1,7 +1,8 @@
 import { ReflectUtils } from '@dooboostore/core/reflect/ReflectUtils';
 
 export interface QueryOptions {
-  useShadow?: boolean;
+  selector?: string;
+  root?: 'light' | 'shadow' | 'all' | 'auto';
 }
 
 export interface QueryMetadata {
@@ -13,12 +14,14 @@ export interface QueryMetadata {
 
 export const QUERY_METADATA_KEY = Symbol('simple-web-component:query');
 
-export const query = (selector: string, options: QueryOptions = { useShadow: true }): any => {
-  return (target: Object, propertyKey: string | symbol, descriptor?: PropertyDescriptor) => {
+export function query(selector: string): any;
+export function query(options: QueryOptions): any;
+export function query(target: Object, propertyKey: string | symbol): void;
+export function query(arg1?: string | QueryOptions | Object, arg2?: string | symbol): any {
+  const decorator = (selector: string, options: QueryOptions, target: Object, propertyKey: string | symbol, descriptor?: PropertyDescriptor) => {
     const isMethod = !!descriptor;
     const constructor = target.constructor;
 
-    // 메타데이터 저장 (나중에 elementDefine에서 사용)
     let queries = ReflectUtils.getMetadata<QueryMetadata[]>(QUERY_METADATA_KEY, constructor);
     if (!queries) {
       queries = [];
@@ -27,18 +30,42 @@ export const query = (selector: string, options: QueryOptions = { useShadow: tru
     queries.push({ selector, options, propertyKey, isMethod });
 
     if (!isMethod) {
-      // 속성 데코레이터인 경우: 기존처럼 Lazy Getter 설정
       Object.defineProperty(target, propertyKey, {
         get(this: HTMLElement) {
-          const root = options.useShadow !== false && this.shadowRoot ? this.shadowRoot : this;
-          return root.querySelector(selector);
+          if (!selector) return this;
+          let searchRoot: Node = this;
+          if (options.root === 'shadow') searchRoot = this.shadowRoot || this;
+          else if (options.root === 'light') searchRoot = this;
+          else searchRoot = this.shadowRoot || this; // Default: Auto (Shadow-First)
+
+          return (searchRoot as HTMLElement).querySelector(selector);
         },
         enumerable: true,
         configurable: true
       });
     }
   };
-};
+
+  // Case: @query (parameterless decorator)
+  if (arg1 && typeof arg2 === 'string') {
+    return decorator('', {}, arg1 as Object, arg2 as string | symbol);
+  }
+
+  // Case: @query('selector') or @query({ selector: '...', ... })
+  return (target: Object, propertyKey: string | symbol, descriptor?: PropertyDescriptor) => {
+    let selector = '';
+    let options: QueryOptions = {};
+
+    if (typeof arg1 === 'string') {
+      selector = arg1;
+    } else if (typeof arg1 === 'object') {
+      options = arg1 as QueryOptions;
+      selector = options.selector || '';
+    }
+
+    decorator(selector, options, target, propertyKey, descriptor);
+  };
+}
 
 export const getQueryMetadata = (target: any): QueryMetadata[] | undefined => {
   const constructor = target instanceof Function ? target : target.constructor;

package/src/decorators/queryAll.ts

@@ -1,7 +1,8 @@
 import { ReflectUtils } from '@dooboostore/core/reflect/ReflectUtils';
 
 export interface QueryAllOptions {
-  useShadow?: boolean;
+  selector?: string;
+  root?: 'light' | 'shadow' | 'all' | 'auto';
 }
 
 export interface QueryAllMetadata {
@@ -13,12 +14,14 @@ export interface QueryAllMetadata {
 
 export const QUERY_ALL_METADATA_KEY = Symbol('simple-web-component:query-all');
 
-export const queryAll = (selector: string, options: QueryAllOptions = { useShadow: true }): any => {
-  return (target: Object, propertyKey: string | symbol, descriptor?: PropertyDescriptor) => {
+export function queryAll(selector: string): any;
+export function queryAll(options: QueryAllOptions): any;
+export function queryAll(target: Object, propertyKey: string | symbol): void;
+export function queryAll(arg1?: string | QueryAllOptions | Object, arg2?: string | symbol): any {
+  const decorator = (selector: string, options: QueryAllOptions, target: Object, propertyKey: string | symbol, descriptor?: PropertyDescriptor) => {
     const isMethod = !!descriptor;
     const constructor = target.constructor;
 
-    // 메타데이터 저장 (나중에 elementDefine에서 사용)
     let queries = ReflectUtils.getMetadata<QueryAllMetadata[]>(QUERY_ALL_METADATA_KEY, constructor);
     if (!queries) {
       queries = [];
@@ -27,18 +30,42 @@ export const queryAll = (selector: string, options: QueryAllOptions = { useShado
     queries.push({ selector, options, propertyKey, isMethod });
 
     if (!isMethod) {
-      // 속성 데코레이터인 경우: 기존처럼 Lazy Getter 설정
       Object.defineProperty(target, propertyKey, {
         get(this: HTMLElement) {
-          const root = options.useShadow !== false && this.shadowRoot ? this.shadowRoot : this;
-          return root.querySelectorAll(selector);
+          if (!selector) return [this];
+          let searchRoot: Node = this;
+          if (options.root === 'shadow') searchRoot = this.shadowRoot || this;
+          else if (options.root === 'light') searchRoot = this;
+          else searchRoot = this.shadowRoot || this; // Default: Auto (Shadow-First)
+
+          return (searchRoot as HTMLElement).querySelectorAll(selector);
         },
         enumerable: true,
         configurable: true
       });
     }
   };
-};
+
+  // Case: @queryAll (parameterless decorator)
+  if (arg1 && typeof arg2 === 'string') {
+    return decorator('', {}, arg1 as Object, arg2 as string | symbol);
+  }
+
+  // Case: @queryAll('selector') or @queryAll({ selector: '...', ... })
+  return (target: Object, propertyKey: string | symbol, descriptor?: PropertyDescriptor) => {
+    let selector = '';
+    let options: QueryAllOptions = {};
+
+    if (typeof arg1 === 'string') {
+      selector = arg1;
+    } else if (typeof arg1 === 'object') {
+      options = arg1 as QueryAllOptions;
+      selector = options.selector || '';
+    }
+
+    decorator(selector, options, target, propertyKey, descriptor);
+  };
+}
 
 export const getQueryAllMetadata = (target: any): QueryAllMetadata[] | undefined => {
   const constructor = target instanceof Function ? target : target.constructor;

package/src/decorators/state.ts

@@ -11,7 +11,7 @@ export interface StateMetadata {
 
 export const STATE_METADATA_KEY = Symbol('simple-web-component:state');
 
-export function state(nameOrOptions: string | StateOptions): PropertyDecorator;
+export function state(nameOrOptions?: string | StateOptions): PropertyDecorator;
 export function state(target: Object, propertyKey: string | symbol): void;
 export function state(arg1?: string | StateOptions | Object, arg2?: string | symbol): PropertyDecorator | void {
   const decorator = (options: StateOptions, target: Object, propertyKey: string | symbol) => {

package/src/elements/SwcChoose.ts

@@ -37,7 +37,6 @@ export class SwcChoose extends HTMLElement {
     const other = this.querySelector('swc-other');
     let matched = false;
 
-    // 현재 choose에 설정된 value (swc-value 우선)
     const chooseValue = this.getAttribute('swc-value') ?? this.getAttribute('value') ?? this._swcValue;
 
     whens.forEach(when => {
@@ -48,15 +47,12 @@ export class SwcChoose extends HTMLElement {
 
       const testAttr = when.getAttribute('test');
       if (testAttr === null) return;
-      if (testAttr.includes('{{')) return; // 아직 치환 전이면 스킵
+      if (testAttr.includes('{{')) return;
 
       let isConditionMet = false;
-
       if (chooseValue !== undefined && chooseValue !== null) {
-        // 1. 매칭 모드: choose의 value와 when의 test값이 같은지 비교
         isConditionMet = String(chooseValue) === String(testAttr);
       } else {
-        // 2. 표현식 모드: testAttr 자체가 실행 가능한 코드인 경우
         try {
           if (testAttr === 'true') isConditionMet = true;
           else if (testAttr === 'false') isConditionMet = false;

package/src/elements/SwcForOf.ts

@@ -13,9 +13,10 @@ export class SwcForOf extends SwcHTMLElementBase {
     if (!Array.isArray(val)) val = [];
     this._swcValue = this.createReactiveProxy(
       val,
-      () => this.renderAll(),
+      () => (this as any)._updateState((this as any)._asKey),
       (idx, v) => this.updateSingleRow(idx, v)
     );
+    if (this._masterTplNodes.length === 0) this.initCore();
     this.renderAll();
   }
 

package/src/elements/SwcObject.ts

@@ -12,7 +12,12 @@ export class SwcObject extends SwcHTMLElementBase {
 
   set swcValue(val: any) {
     if (typeof val !== 'object' || val === null) val = {};
-    this._swcValue = this.createReactiveProxy(val, () => this.updateUI());
+    this._swcValue = this.createReactiveProxy(val, () => {
+      if (typeof (this as any)._updateState === 'function') {
+        (this as any)._updateState((this as any)._asKey);
+      }
+      this.updateUI();
+    });
     if (this._masterTplNodes.length === 0) this.initCore();
     this.render();
   }
@@ -41,12 +46,9 @@ export class SwcObject extends SwcHTMLElementBase {
   }
 
   private render() {
-    if (!this.shadowRoot || this._masterTplNodes.length === 0) return;
-
-    this._renderedNodes.forEach(n => {
-      if (n.parentElement === this) this.removeChild(n);
-    });
+    this.innerHTML = '';
     this._renderedNodes = [];
+    if (!this.shadowRoot || this._masterTplNodes.length === 0) return;
 
     let slot = this.shadowRoot.querySelector('slot[name="obj-content"]');
     if (!slot) {

package/src/index.ts

@@ -8,13 +8,10 @@ export * from './decorators/lifecycles';
 export * from './decorators/query';
 export * from './decorators/queryAll';
 export * from './decorators/addEventListener';
-export * from './elements/SwcForOf';
-export * from './elements/SwcIf';
-export * from './elements/SwcChoose';
-export * from './elements/SwcWhen';
-export * from './elements/SwcOther';
-export * from './elements/SwcObject';
 export * from './elements/SwcHTMLElementBase';
+export * from './elements/SwcObject';
+export * from './elements/SwcIf';
+export * from './elements/SwcForOf';
 export * from './utils/Utils';
 export * from './is/SwcHTMLAnchorElementBase';
 export * from './is/SwcForOfAnchor';

package/src/is/SwcIfAnchor.ts

@@ -53,8 +53,8 @@ export class SwcIfAnchor extends SwcHTMLAnchorElementBase {
     if (isTruthy && this._masterTplNodes.length > 0) {
       this._masterTplNodes.forEach(tplNode => {
         const clone = tplNode.cloneNode(true) as HTMLElement;
-        if (clone.style) clone.style.display = 'contents';
         this.appendChild(clone);
+        if (clone.style) clone.style.display = 'contents';
         this.applyData(clone, this._swcValue);
       });
     }

package/src/is/SwcIfArea.ts

@@ -53,8 +53,8 @@ export class SwcIfArea extends SwcHTMLAreaElementBase {
     if (isTruthy && this._masterTplNodes.length > 0) {
       this._masterTplNodes.forEach(tplNode => {
         const clone = tplNode.cloneNode(true) as HTMLElement;
-        if (clone.style) clone.style.display = 'contents';
         this.appendChild(clone);
+        if (clone.style) clone.style.display = 'contents';
         this.applyData(clone, this._swcValue);
       });
     }

package/src/is/SwcIfAudio.ts

@@ -53,8 +53,8 @@ export class SwcIfAudio extends SwcHTMLAudioElementBase {
     if (isTruthy && this._masterTplNodes.length > 0) {
       this._masterTplNodes.forEach(tplNode => {
         const clone = tplNode.cloneNode(true) as HTMLElement;
-        if (clone.style) clone.style.display = 'contents';
         this.appendChild(clone);
+        if (clone.style) clone.style.display = 'contents';
         this.applyData(clone, this._swcValue);
       });
     }

package/src/is/SwcIfBase.ts

@@ -53,8 +53,8 @@ export class SwcIfBase extends SwcHTMLBaseElementBase {
     if (isTruthy && this._masterTplNodes.length > 0) {
       this._masterTplNodes.forEach(tplNode => {
         const clone = tplNode.cloneNode(true) as HTMLElement;
-        if (clone.style) clone.style.display = 'contents';
         this.appendChild(clone);
+        if (clone.style) clone.style.display = 'contents';
         this.applyData(clone, this._swcValue);
       });
     }

package/src/is/SwcIfButton.ts

@@ -53,8 +53,8 @@ export class SwcIfButton extends SwcHTMLButtonElementBase {
     if (isTruthy && this._masterTplNodes.length > 0) {
       this._masterTplNodes.forEach(tplNode => {
         const clone = tplNode.cloneNode(true) as HTMLElement;
-        if (clone.style) clone.style.display = 'contents';
         this.appendChild(clone);
+        if (clone.style) clone.style.display = 'contents';
         this.applyData(clone, this._swcValue);
       });
     }

package/src/is/SwcIfCanvas.ts

@@ -53,8 +53,8 @@ export class SwcIfCanvas extends SwcHTMLCanvasElementBase {
     if (isTruthy && this._masterTplNodes.length > 0) {
       this._masterTplNodes.forEach(tplNode => {
         const clone = tplNode.cloneNode(true) as HTMLElement;
-        if (clone.style) clone.style.display = 'contents';
         this.appendChild(clone);
+        if (clone.style) clone.style.display = 'contents';
         this.applyData(clone, this._swcValue);
       });
     }

package/src/is/SwcIfData.ts

@@ -53,8 +53,8 @@ export class SwcIfData extends SwcHTMLDataElementBase {
     if (isTruthy && this._masterTplNodes.length > 0) {
       this._masterTplNodes.forEach(tplNode => {
         const clone = tplNode.cloneNode(true) as HTMLElement;
-        if (clone.style) clone.style.display = 'contents';
         this.appendChild(clone);
+        if (clone.style) clone.style.display = 'contents';
         this.applyData(clone, this._swcValue);
       });
     }

package/src/is/SwcIfDataList.ts

@@ -53,8 +53,8 @@ export class SwcIfDataList extends SwcHTMLDataListElementBase {
     if (isTruthy && this._masterTplNodes.length > 0) {
       this._masterTplNodes.forEach(tplNode => {
         const clone = tplNode.cloneNode(true) as HTMLElement;
-        if (clone.style) clone.style.display = 'contents';
         this.appendChild(clone);
+        if (clone.style) clone.style.display = 'contents';
         this.applyData(clone, this._swcValue);
       });
     }

package/src/is/SwcIfDetails.ts

@@ -53,8 +53,8 @@ export class SwcIfDetails extends SwcHTMLDetailsElementBase {
     if (isTruthy && this._masterTplNodes.length > 0) {
       this._masterTplNodes.forEach(tplNode => {
         const clone = tplNode.cloneNode(true) as HTMLElement;
-        if (clone.style) clone.style.display = 'contents';
         this.appendChild(clone);
+        if (clone.style) clone.style.display = 'contents';
         this.applyData(clone, this._swcValue);
       });
     }

package/src/is/SwcIfDialog.ts

@@ -53,8 +53,8 @@ export class SwcIfDialog extends SwcHTMLDialogElementBase {
     if (isTruthy && this._masterTplNodes.length > 0) {
       this._masterTplNodes.forEach(tplNode => {
         const clone = tplNode.cloneNode(true) as HTMLElement;
-        if (clone.style) clone.style.display = 'contents';
         this.appendChild(clone);
+        if (clone.style) clone.style.display = 'contents';
         this.applyData(clone, this._swcValue);
       });
     }