@dooboostore/simple-web-component 1.0.6 → 1.0.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dooboostore/simple-web-component",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "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",
@@ -80,8 +80,8 @@
     "esbuild": "^0.23.0",
     "reflect-metadata": "^0.2.2",
     "@dooboostore/core": "1.0.28",
-    "@dooboostore/core-node": "1.0.10",
-    "@dooboostore/core-web": "1.0.9"
+    "@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

@@ -157,66 +157,95 @@ 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 {
+            // Default: 'auto'
+            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);
-                  });
-                }
-              }
+              });
             });
           });
         }

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);
       });
     }

package/src/is/SwcIfDiv.ts

@@ -53,8 +53,8 @@ export class SwcIfDiv extends SwcHTMLDivElementBase {
     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/SwcIfDl.ts

@@ -53,8 +53,8 @@ export class SwcIfDl extends SwcHTMLDListElementBase {
     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/SwcIfEmbed.ts

@@ -53,8 +53,8 @@ export class SwcIfEmbed extends SwcHTMLEmbedElementBase {
     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/SwcIfFieldSet.ts

@@ -53,8 +53,8 @@ export class SwcIfFieldSet extends SwcHTMLFieldSetElementBase {
     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/SwcIfForm.ts

@@ -53,8 +53,8 @@ export class SwcIfForm extends SwcHTMLFormElementBase {
     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/SwcIfHeading.ts

@@ -53,8 +53,8 @@ export class SwcIfHeading extends SwcHTMLHeadingElementBase {
     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/SwcIfHr.ts

@@ -53,8 +53,8 @@ export class SwcIfHr extends SwcHTMLHRElementBase {
     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/SwcIfIFrame.ts

@@ -53,8 +53,8 @@ export class SwcIfIFrame extends SwcHTMLIFrameElementBase {
     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/SwcIfImage.ts

@@ -53,8 +53,8 @@ export class SwcIfImage extends SwcHTMLImageElementBase {
     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/SwcIfInput.ts

@@ -53,8 +53,8 @@ export class SwcIfInput extends SwcHTMLInputElementBase {
     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);
       });
     }