@dooboostore/simple-web-component 1.0.5 → 1.0.7

package/src/decorators/lifecycles.ts

@@ -6,6 +6,10 @@ export const ON_BEFORE_DISCONNECTED_METADATA_KEY = Symbol('simple-web-component:
 export const ON_AFTER_DISCONNECTED_METADATA_KEY = Symbol('simple-web-component:on-after-disconnected');
 export const ON_BEFORE_ADOPTED_METADATA_KEY = Symbol('simple-web-component:on-before-adopted');
 export const ON_AFTER_ADOPTED_METADATA_KEY = Symbol('simple-web-component:on-after-adopted');
+export const ON_ADD_EVENT_LISTENER_METADATA_KEY = Symbol('simple-web-component:on-add-event-listener');
+export const ON_ATTRIBUTE_CHANGED_METADATA_KEY = Symbol('simple-web-component:on-attribute-changed');
+
+export const ATTRIBUTE_CHANGED_WILDCARD = '*';
 
 function createLifecycleDecorator(metadataKey: symbol): MethodDecorator {
   return (target: Object, propertyKey: string | symbol) => {
@@ -21,17 +25,53 @@ function createLifecycleDecorator(metadataKey: symbol): MethodDecorator {
 
 export const onBeforeConnected = createLifecycleDecorator(ON_BEFORE_CONNECTED_METADATA_KEY);
 export const onAfterConnected = createLifecycleDecorator(ON_AFTER_CONNECTED_METADATA_KEY);
-export const onConnected = onAfterConnected; // Alias for backward compatibility
+export const onConnected = onAfterConnected;
 
 export const onBeforeDisconnected = createLifecycleDecorator(ON_BEFORE_DISCONNECTED_METADATA_KEY);
 export const onAfterDisconnected = createLifecycleDecorator(ON_AFTER_DISCONNECTED_METADATA_KEY);
-export const onDisconnected = onAfterDisconnected; // Alias
+export const onDisconnected = onAfterDisconnected;
 
 export const onBeforeAdopted = createLifecycleDecorator(ON_BEFORE_ADOPTED_METADATA_KEY);
 export const onAfterAdopted = createLifecycleDecorator(ON_AFTER_ADOPTED_METADATA_KEY);
-export const onAdopted = onAfterAdopted; // Alias
+export const onAdopted = onAfterAdopted;
+
+export const onAddEventListener = createLifecycleDecorator(ON_ADD_EVENT_LISTENER_METADATA_KEY);
+
+export function onAttributeChanged(attributeName: string | string[]): MethodDecorator;
+export function onAttributeChanged(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
+export function onAttributeChanged(arg1: string | string[] | Object, arg2?: string | symbol, arg3?: PropertyDescriptor): MethodDecorator | void {
+  const decorator = (attributeName: string, target: Object, propertyKey: string | symbol) => {
+    const constructor = target.constructor;
+    let meta = ReflectUtils.getMetadata<Map<string, (string | symbol)[]>>(ON_ATTRIBUTE_CHANGED_METADATA_KEY, constructor);
+    if (!meta) {
+      meta = new Map<string, (string | symbol)[]>();
+      ReflectUtils.defineMetadata(ON_ATTRIBUTE_CHANGED_METADATA_KEY, meta, constructor);
+    }
+
+    let methods = meta.get(attributeName);
+    if (!methods) {
+      methods = [];
+      meta.set(attributeName, methods);
+    }
+    if (!methods.includes(propertyKey)) {
+      methods.push(propertyKey);
+    }
+  };
+
+  if (typeof arg1 === 'string') {
+    return (target: Object, propertyKey: string | symbol) => {
+      decorator(arg1, target, propertyKey);
+    };
+  } else if (Array.isArray(arg1)) {
+    return (target: Object, propertyKey: string | symbol) => {
+      arg1.forEach(name => decorator(name, target, propertyKey));
+    };
+  } else if (arg1 && arg2) {
+    decorator(ATTRIBUTE_CHANGED_WILDCARD, arg1, arg2);
+  }
+}
 
-export const getLifecycleMetadata = (target: any, metadataKey: symbol): (string | symbol)[] | undefined => {
+export const getLifecycleMetadata = (target: any, metadataKey: symbol): any => {
   const constructor = target instanceof Function ? target : target.constructor;
   return ReflectUtils.getMetadata(metadataKey, constructor);
 };

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

@@ -0,0 +1,44 @@
+import { ReflectUtils } from '@dooboostore/core/reflect/ReflectUtils';
+
+export interface StateOptions {
+  name?: string;
+}
+
+export interface StateMetadata {
+  propertyKey: string | symbol;
+  options: StateOptions;
+}
+
+export const STATE_METADATA_KEY = Symbol('simple-web-component:state');
+
+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) => {
+    const constructor = target.constructor;
+    if (!options.name) options.name = String(propertyKey);
+
+    let list = ReflectUtils.getMetadata<StateMetadata[]>(STATE_METADATA_KEY, constructor);
+    if (!list) {
+      list = [];
+      ReflectUtils.defineMetadata(STATE_METADATA_KEY, list, constructor);
+    }
+    list.push({ propertyKey, options });
+  };
+
+  if (arg2) {
+    // Used as @state
+    return decorator({}, arg1!, arg2);
+  }
+
+  // Used as @state(options)
+  return (target: Object, propertyKey: string | symbol) => {
+    const options: StateOptions = typeof arg1 === 'string' ? { name: arg1 } : (arg1 as StateOptions) || {};
+    decorator(options, target, propertyKey);
+  };
+}
+
+export const getStateMetadataList = (target: any): StateMetadata[] | undefined => {
+  const constructor = target instanceof Function ? target : target.constructor;
+  return ReflectUtils.getMetadata(STATE_METADATA_KEY, constructor);
+};

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

@@ -1,18 +1,17 @@
 import 'reflect-metadata';
 export * from './decorators/elementDefine';
 export * from './decorators/innerHtml';
-export * from './decorators/attributeChanged';
+export * from './decorators/attribute';
+export * from './decorators/state';
+export * from './decorators/emitCustomEvent';
 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/SwcChooseAnchor.ts

@@ -69,7 +69,6 @@ export class SwcChooseAnchor extends SwcHTMLAnchorElementBase {
 
   private _renderBranch(branch: Branch) {
     const clone = branch.tpl.cloneNode(true) as HTMLElement;
-    // Force visibility since it hides itself in connectedCallback
     clone.style.display = 'contents';
     this.appendChild(clone);
     this.applyData(clone, this._swcValue);

package/src/is/SwcChooseArea.ts

@@ -69,7 +69,6 @@ export class SwcChooseArea extends SwcHTMLAreaElementBase {
 
   private _renderBranch(branch: Branch) {
     const clone = branch.tpl.cloneNode(true) as HTMLElement;
-    // Force visibility since it hides itself in connectedCallback
     clone.style.display = 'contents';
     this.appendChild(clone);
     this.applyData(clone, this._swcValue);

package/src/is/SwcChooseAudio.ts

@@ -69,7 +69,6 @@ export class SwcChooseAudio extends SwcHTMLAudioElementBase {
 
   private _renderBranch(branch: Branch) {
     const clone = branch.tpl.cloneNode(true) as HTMLElement;
-    // Force visibility since it hides itself in connectedCallback
     clone.style.display = 'contents';
     this.appendChild(clone);
     this.applyData(clone, this._swcValue);

package/src/is/SwcChooseBase.ts

@@ -69,7 +69,6 @@ export class SwcChooseBase extends SwcHTMLBaseElementBase {
 
   private _renderBranch(branch: Branch) {
     const clone = branch.tpl.cloneNode(true) as HTMLElement;
-    // Force visibility since it hides itself in connectedCallback
     clone.style.display = 'contents';
     this.appendChild(clone);
     this.applyData(clone, this._swcValue);

package/src/is/SwcChooseButton.ts

@@ -69,7 +69,6 @@ export class SwcChooseButton extends SwcHTMLButtonElementBase {
 
   private _renderBranch(branch: Branch) {
     const clone = branch.tpl.cloneNode(true) as HTMLElement;
-    // Force visibility since it hides itself in connectedCallback
     clone.style.display = 'contents';
     this.appendChild(clone);
     this.applyData(clone, this._swcValue);

package/src/is/SwcChooseCanvas.ts

@@ -69,7 +69,6 @@ export class SwcChooseCanvas extends SwcHTMLCanvasElementBase {
 
   private _renderBranch(branch: Branch) {
     const clone = branch.tpl.cloneNode(true) as HTMLElement;
-    // Force visibility since it hides itself in connectedCallback
     clone.style.display = 'contents';
     this.appendChild(clone);
     this.applyData(clone, this._swcValue);

package/src/is/SwcChooseData.ts

@@ -69,7 +69,6 @@ export class SwcChooseData extends SwcHTMLDataElementBase {
 
   private _renderBranch(branch: Branch) {
     const clone = branch.tpl.cloneNode(true) as HTMLElement;
-    // Force visibility since it hides itself in connectedCallback
     clone.style.display = 'contents';
     this.appendChild(clone);
     this.applyData(clone, this._swcValue);

package/src/is/SwcChooseDataList.ts

@@ -69,7 +69,6 @@ export class SwcChooseDataList extends SwcHTMLDataListElementBase {
 
   private _renderBranch(branch: Branch) {
     const clone = branch.tpl.cloneNode(true) as HTMLElement;
-    // Force visibility since it hides itself in connectedCallback
     clone.style.display = 'contents';
     this.appendChild(clone);
     this.applyData(clone, this._swcValue);

package/src/is/SwcChooseDetails.ts

@@ -69,7 +69,6 @@ export class SwcChooseDetails extends SwcHTMLDetailsElementBase {
 
   private _renderBranch(branch: Branch) {
     const clone = branch.tpl.cloneNode(true) as HTMLElement;
-    // Force visibility since it hides itself in connectedCallback
     clone.style.display = 'contents';
     this.appendChild(clone);
     this.applyData(clone, this._swcValue);

package/src/is/SwcChooseDialog.ts

@@ -69,7 +69,6 @@ export class SwcChooseDialog extends SwcHTMLDialogElementBase {
 
   private _renderBranch(branch: Branch) {
     const clone = branch.tpl.cloneNode(true) as HTMLElement;
-    // Force visibility since it hides itself in connectedCallback
     clone.style.display = 'contents';
     this.appendChild(clone);
     this.applyData(clone, this._swcValue);

package/src/is/SwcChooseDiv.ts

@@ -69,7 +69,6 @@ export class SwcChooseDiv extends SwcHTMLDivElementBase {
 
   private _renderBranch(branch: Branch) {
     const clone = branch.tpl.cloneNode(true) as HTMLElement;
-    // Force visibility since it hides itself in connectedCallback
     clone.style.display = 'contents';
     this.appendChild(clone);
     this.applyData(clone, this._swcValue);

package/src/is/SwcChooseDl.ts

@@ -69,7 +69,6 @@ export class SwcChooseDl extends SwcHTMLDListElementBase {
 
   private _renderBranch(branch: Branch) {
     const clone = branch.tpl.cloneNode(true) as HTMLElement;
-    // Force visibility since it hides itself in connectedCallback
     clone.style.display = 'contents';
     this.appendChild(clone);
     this.applyData(clone, this._swcValue);

package/src/is/SwcChooseEmbed.ts

@@ -69,7 +69,6 @@ export class SwcChooseEmbed extends SwcHTMLEmbedElementBase {
 
   private _renderBranch(branch: Branch) {
     const clone = branch.tpl.cloneNode(true) as HTMLElement;
-    // Force visibility since it hides itself in connectedCallback
     clone.style.display = 'contents';
     this.appendChild(clone);
     this.applyData(clone, this._swcValue);

package/src/is/SwcChooseFieldSet.ts

@@ -69,7 +69,6 @@ export class SwcChooseFieldSet extends SwcHTMLFieldSetElementBase {
 
   private _renderBranch(branch: Branch) {
     const clone = branch.tpl.cloneNode(true) as HTMLElement;
-    // Force visibility since it hides itself in connectedCallback
     clone.style.display = 'contents';
     this.appendChild(clone);
     this.applyData(clone, this._swcValue);

package/src/is/SwcChooseForm.ts

@@ -69,7 +69,6 @@ export class SwcChooseForm extends SwcHTMLFormElementBase {
 
   private _renderBranch(branch: Branch) {
     const clone = branch.tpl.cloneNode(true) as HTMLElement;
-    // Force visibility since it hides itself in connectedCallback
     clone.style.display = 'contents';
     this.appendChild(clone);
     this.applyData(clone, this._swcValue);

package/src/is/SwcChooseHeading.ts

@@ -69,7 +69,6 @@ export class SwcChooseHeading extends SwcHTMLHeadingElementBase {
 
   private _renderBranch(branch: Branch) {
     const clone = branch.tpl.cloneNode(true) as HTMLElement;
-    // Force visibility since it hides itself in connectedCallback
     clone.style.display = 'contents';
     this.appendChild(clone);
     this.applyData(clone, this._swcValue);

package/src/is/SwcChooseHr.ts

@@ -69,7 +69,6 @@ export class SwcChooseHr extends SwcHTMLHRElementBase {
 
   private _renderBranch(branch: Branch) {
     const clone = branch.tpl.cloneNode(true) as HTMLElement;
-    // Force visibility since it hides itself in connectedCallback
     clone.style.display = 'contents';
     this.appendChild(clone);
     this.applyData(clone, this._swcValue);

package/src/is/SwcChooseIFrame.ts

@@ -69,7 +69,6 @@ export class SwcChooseIFrame extends SwcHTMLIFrameElementBase {
 
   private _renderBranch(branch: Branch) {
     const clone = branch.tpl.cloneNode(true) as HTMLElement;
-    // Force visibility since it hides itself in connectedCallback
     clone.style.display = 'contents';
     this.appendChild(clone);
     this.applyData(clone, this._swcValue);

package/src/is/SwcChooseImage.ts

@@ -69,7 +69,6 @@ export class SwcChooseImage extends SwcHTMLImageElementBase {
 
   private _renderBranch(branch: Branch) {
     const clone = branch.tpl.cloneNode(true) as HTMLElement;
-    // Force visibility since it hides itself in connectedCallback
     clone.style.display = 'contents';
     this.appendChild(clone);
     this.applyData(clone, this._swcValue);

package/src/is/SwcChooseInput.ts

@@ -69,7 +69,6 @@ export class SwcChooseInput extends SwcHTMLInputElementBase {
 
   private _renderBranch(branch: Branch) {
     const clone = branch.tpl.cloneNode(true) as HTMLElement;
-    // Force visibility since it hides itself in connectedCallback
     clone.style.display = 'contents';
     this.appendChild(clone);
     this.applyData(clone, this._swcValue);

package/src/is/SwcChooseLabel.ts

@@ -69,7 +69,6 @@ export class SwcChooseLabel extends SwcHTMLLabelElementBase {
 
   private _renderBranch(branch: Branch) {
     const clone = branch.tpl.cloneNode(true) as HTMLElement;
-    // Force visibility since it hides itself in connectedCallback
     clone.style.display = 'contents';
     this.appendChild(clone);
     this.applyData(clone, this._swcValue);

package/src/is/SwcChooseLegend.ts

@@ -69,7 +69,6 @@ export class SwcChooseLegend extends SwcHTMLLegendElementBase {
 
   private _renderBranch(branch: Branch) {
     const clone = branch.tpl.cloneNode(true) as HTMLElement;
-    // Force visibility since it hides itself in connectedCallback
     clone.style.display = 'contents';
     this.appendChild(clone);
     this.applyData(clone, this._swcValue);

package/src/is/SwcChooseLi.ts

@@ -69,7 +69,6 @@ export class SwcChooseLi extends SwcHTMLLIElementBase {
 
   private _renderBranch(branch: Branch) {
     const clone = branch.tpl.cloneNode(true) as HTMLElement;
-    // Force visibility since it hides itself in connectedCallback
     clone.style.display = 'contents';
     this.appendChild(clone);
     this.applyData(clone, this._swcValue);

package/src/is/SwcChooseLink.ts

@@ -69,7 +69,6 @@ export class SwcChooseLink extends SwcHTMLLinkElementBase {
 
   private _renderBranch(branch: Branch) {
     const clone = branch.tpl.cloneNode(true) as HTMLElement;
-    // Force visibility since it hides itself in connectedCallback
     clone.style.display = 'contents';
     this.appendChild(clone);
     this.applyData(clone, this._swcValue);

package/src/is/SwcChooseMap.ts

@@ -69,7 +69,6 @@ export class SwcChooseMap extends SwcHTMLMapElementBase {
 
   private _renderBranch(branch: Branch) {
     const clone = branch.tpl.cloneNode(true) as HTMLElement;
-    // Force visibility since it hides itself in connectedCallback
     clone.style.display = 'contents';
     this.appendChild(clone);
     this.applyData(clone, this._swcValue);

package/src/is/SwcChooseMeta.ts

@@ -69,7 +69,6 @@ export class SwcChooseMeta extends SwcHTMLMetaElementBase {
 
   private _renderBranch(branch: Branch) {
     const clone = branch.tpl.cloneNode(true) as HTMLElement;
-    // Force visibility since it hides itself in connectedCallback
     clone.style.display = 'contents';
     this.appendChild(clone);
     this.applyData(clone, this._swcValue);

package/src/is/SwcChooseMeter.ts

@@ -69,7 +69,6 @@ export class SwcChooseMeter extends SwcHTMLMeterElementBase {
 
   private _renderBranch(branch: Branch) {
     const clone = branch.tpl.cloneNode(true) as HTMLElement;
-    // Force visibility since it hides itself in connectedCallback
     clone.style.display = 'contents';
     this.appendChild(clone);
     this.applyData(clone, this._swcValue);

package/src/is/SwcChooseMod.ts

@@ -69,7 +69,6 @@ export class SwcChooseMod extends SwcHTMLModElementBase {
 
   private _renderBranch(branch: Branch) {
     const clone = branch.tpl.cloneNode(true) as HTMLElement;
-    // Force visibility since it hides itself in connectedCallback
     clone.style.display = 'contents';
     this.appendChild(clone);
     this.applyData(clone, this._swcValue);

package/src/is/SwcChooseObject.ts

@@ -69,7 +69,6 @@ export class SwcChooseObject extends SwcHTMLObjectElementBase {
 
   private _renderBranch(branch: Branch) {
     const clone = branch.tpl.cloneNode(true) as HTMLElement;
-    // Force visibility since it hides itself in connectedCallback
     clone.style.display = 'contents';
     this.appendChild(clone);
     this.applyData(clone, this._swcValue);

package/src/is/SwcChooseOl.ts

@@ -69,7 +69,6 @@ export class SwcChooseOl extends SwcHTMLOListElementBase {
 
   private _renderBranch(branch: Branch) {
     const clone = branch.tpl.cloneNode(true) as HTMLElement;
-    // Force visibility since it hides itself in connectedCallback
     clone.style.display = 'contents';
     this.appendChild(clone);
     this.applyData(clone, this._swcValue);

package/src/is/SwcChooseOptGroup.ts

@@ -69,7 +69,6 @@ export class SwcChooseOptGroup extends SwcHTMLOptGroupElementBase {
 
   private _renderBranch(branch: Branch) {
     const clone = branch.tpl.cloneNode(true) as HTMLElement;
-    // Force visibility since it hides itself in connectedCallback
     clone.style.display = 'contents';
     this.appendChild(clone);
     this.applyData(clone, this._swcValue);