@dooboostore/simple-web-component 1.0.5 → 1.0.6

package/dist/cjs/is/SwcIfCanvas.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/is/SwcIfCanvas.ts"],
-  "sourcesContent": ["import { elementDefine, innerHtml } from '../index';\nimport { SwcHTMLCanvasElementBase } from './SwcHTMLCanvasElementBase';\n\n@elementDefine({ name: 'swc-if-canvas', extends: 'canvas' })\nexport class SwcIfCanvas extends SwcHTMLCanvasElementBase {\n  private _swcValue: any = false;\n\n  constructor() {\n    super();\n  }\n\n  set swcValue(val: any) {\n    this._swcValue = val;\n    if (this._masterTplNodes.length === 0) this.initCore();\n    this.render();\n  }\n\n  get swcValue(): any {\n    return this._swcValue;\n  }\n\n  @innerHtml\n  renderTemplate() {\n    return `<slot id=\"tpl-slot\" style=\"display:none;\"></slot>`;\n  }\n\n  connectedCallback() {\n    this.initCore();\n    if (this._masterTplNodes.length > 0) {\n      this.innerHTML = '';\n      this.render();\n    }\n  }\n\n  private render() {\n    const attrValue = this.getAttribute('swc-value') || this.getAttribute('value');\n    if (attrValue !== null && attrValue.includes('{{')) return;\n\n    let displayValue = attrValue !== null ? attrValue : this._swcValue;\n    let isTruthy = !!displayValue;\n    if (typeof displayValue === 'string') {\n      if (displayValue === 'false' || displayValue === '0' || displayValue === '') isTruthy = false;\n      else {\n        try {\n          isTruthy = !!new Function('return ' + displayValue)();\n        } catch (e) {\n          isTruthy = true;\n        }\n      }\n    }\n\n    this.innerHTML = '';\n    if (isTruthy && this._masterTplNodes.length > 0) {\n      this._masterTplNodes.forEach(tplNode => {\n        const clone = tplNode.cloneNode(true) as HTMLElement;\n        this.appendChild(clone);\n        // If it's a Customized Built-in, it might have hidden itself in connectedCallback\n        if (clone.style) clone.style.display = 'contents';\n        this.applyData(clone, this._swcValue);\n      });\n    }\n  }\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;AAAA,eAAyC;AACzC,sCAAyC;;;;;;;;;;AAGlC,IAAM,cAAN,MAAMA,qBAAoB,yDAAwB;EAGvD,cAAA;AACE,UAAK;AAHC,SAAA,YAAiB;EAIzB;EAEA,IAAI,SAAS,KAAQ;AACnB,SAAK,YAAY;AACjB,QAAI,KAAK,gBAAgB,WAAW;AAAG,WAAK,SAAQ;AACpD,SAAK,OAAM;EACb;EAEA,IAAI,WAAQ;AACV,WAAO,KAAK;EACd;EAGA,iBAAc;AACZ,WAAO;EACT;EAEA,oBAAiB;AACf,SAAK,SAAQ;AACb,QAAI,KAAK,gBAAgB,SAAS,GAAG;AACnC,WAAK,YAAY;AACjB,WAAK,OAAM;IACb;EACF;EAEQ,SAAM;AACZ,UAAM,YAAY,KAAK,aAAa,WAAW,KAAK,KAAK,aAAa,OAAO;AAC7E,QAAI,cAAc,QAAQ,UAAU,SAAS,IAAI;AAAG;AAEpD,QAAI,eAAe,cAAc,OAAO,YAAY,KAAK;AACzD,QAAI,WAAW,CAAC,CAAC;AACjB,QAAI,OAAO,iBAAiB,UAAU;AACpC,UAAI,iBAAiB,WAAW,iBAAiB,OAAO,iBAAiB;AAAI,mBAAW;WACnF;AACH,YAAI;AACF,qBAAW,CAAC,CAAC,IAAI,SAAS,YAAY,YAAY,EAAC;QACrD,SAAS,GAAG;AACV,qBAAW;QACb;MACF;IACF;AAEA,SAAK,YAAY;AACjB,QAAI,YAAY,KAAK,gBAAgB,SAAS,GAAG;AAC/C,WAAK,gBAAgB,QAAQ,aAAU;AACrC,cAAM,QAAQ,QAAQ,UAAU,IAAI;AACpC,aAAK,YAAY,KAAK;AAEtB,YAAI,MAAM;AAAO,gBAAM,MAAM,UAAU;AACvC,aAAK,UAAU,OAAO,KAAK,SAAS;MACtC,CAAC;IACH;EACF;;AAvCA,WAAA;EADC;;;;;AAjBU,cAAW,WAAA;MADvB,wBAAc,EAAE,MAAM,iBAAiB,SAAS,SAAQ,CAAE;;GAC9C,WAAW;",
+  "sourcesContent": ["import { elementDefine, innerHtml } from '../index';\nimport { SwcHTMLCanvasElementBase } from './SwcHTMLCanvasElementBase';\n\n@elementDefine({ name: 'swc-if-canvas', extends: 'canvas' })\nexport class SwcIfCanvas extends SwcHTMLCanvasElementBase {\n  private _swcValue: any = false;\n\n  constructor() {\n    super();\n  }\n\n  set swcValue(val: any) {\n    this._swcValue = val;\n    if (this._masterTplNodes.length === 0) this.initCore();\n    this.render();\n  }\n\n  get swcValue(): any {\n    return this._swcValue;\n  }\n\n  @innerHtml\n  renderTemplate() {\n    return `<slot id=\"tpl-slot\" style=\"display:none;\"></slot>`;\n  }\n\n  connectedCallback() {\n    this.initCore();\n    if (this._masterTplNodes.length > 0) {\n      this.innerHTML = '';\n      this.render();\n    }\n  }\n\n  private render() {\n    const attrValue = this.getAttribute('swc-value') || this.getAttribute('value');\n    if (attrValue !== null && attrValue.includes('{{')) return;\n\n    let displayValue = attrValue !== null ? attrValue : this._swcValue;\n    let isTruthy = !!displayValue;\n    if (typeof displayValue === 'string') {\n      if (displayValue === 'false' || displayValue === '0' || displayValue === '') isTruthy = false;\n      else {\n        try {\n          isTruthy = !!new Function('return ' + displayValue)();\n        } catch (e) {\n          isTruthy = true;\n        }\n      }\n    }\n\n    this.innerHTML = '';\n    if (isTruthy && this._masterTplNodes.length > 0) {\n      this._masterTplNodes.forEach(tplNode => {\n        const clone = tplNode.cloneNode(true) as HTMLElement;\n        if (clone.style) clone.style.display = 'contents';\n        this.appendChild(clone);\n        this.applyData(clone, this._swcValue);\n      });\n    }\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;AAAA,eAAyC;AACzC,sCAAyC;;;;;;;;;;AAGlC,IAAM,cAAN,MAAMA,qBAAoB,yDAAwB;EAGvD,cAAA;AACE,UAAK;AAHC,SAAA,YAAiB;EAIzB;EAEA,IAAI,SAAS,KAAQ;AACnB,SAAK,YAAY;AACjB,QAAI,KAAK,gBAAgB,WAAW;AAAG,WAAK,SAAQ;AACpD,SAAK,OAAM;EACb;EAEA,IAAI,WAAQ;AACV,WAAO,KAAK;EACd;EAGA,iBAAc;AACZ,WAAO;EACT;EAEA,oBAAiB;AACf,SAAK,SAAQ;AACb,QAAI,KAAK,gBAAgB,SAAS,GAAG;AACnC,WAAK,YAAY;AACjB,WAAK,OAAM;IACb;EACF;EAEQ,SAAM;AACZ,UAAM,YAAY,KAAK,aAAa,WAAW,KAAK,KAAK,aAAa,OAAO;AAC7E,QAAI,cAAc,QAAQ,UAAU,SAAS,IAAI;AAAG;AAEpD,QAAI,eAAe,cAAc,OAAO,YAAY,KAAK;AACzD,QAAI,WAAW,CAAC,CAAC;AACjB,QAAI,OAAO,iBAAiB,UAAU;AACpC,UAAI,iBAAiB,WAAW,iBAAiB,OAAO,iBAAiB;AAAI,mBAAW;WACnF;AACH,YAAI;AACF,qBAAW,CAAC,CAAC,IAAI,SAAS,YAAY,YAAY,EAAC;QACrD,SAAS,GAAG;AACV,qBAAW;QACb;MACF;IACF;AAEA,SAAK,YAAY;AACjB,QAAI,YAAY,KAAK,gBAAgB,SAAS,GAAG;AAC/C,WAAK,gBAAgB,QAAQ,aAAU;AACrC,cAAM,QAAQ,QAAQ,UAAU,IAAI;AACpC,YAAI,MAAM;AAAO,gBAAM,MAAM,UAAU;AACvC,aAAK,YAAY,KAAK;AACtB,aAAK,UAAU,OAAO,KAAK,SAAS;MACtC,CAAC;IACH;EACF;;AAtCA,WAAA;EADC;;;;;AAjBU,cAAW,WAAA;MADvB,wBAAc,EAAE,MAAM,iBAAiB,SAAS,SAAQ,CAAE;;GAC9C,WAAW;",
   "names": ["SwcIfCanvas"]
 }

package/dist/cjs/is/SwcIfData.js

@@ -76,9 +76,9 @@ let SwcIfData = class SwcIfData2 extends import_SwcHTMLDataElementBase.SwcHTMLDa
     if (isTruthy && this._masterTplNodes.length > 0) {
       this._masterTplNodes.forEach((tplNode) => {
         const clone = tplNode.cloneNode(true);
-        this.appendChild(clone);
         if (clone.style)
           clone.style.display = "contents";
+        this.appendChild(clone);
         this.applyData(clone, this._swcValue);
       });
     }

package/dist/cjs/is/SwcIfData.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/is/SwcIfData.ts"],
-  "sourcesContent": ["import { elementDefine, innerHtml } from '../index';\nimport { SwcHTMLDataElementBase } from './SwcHTMLDataElementBase';\n\n@elementDefine({ name: 'swc-if-data', extends: 'data' })\nexport class SwcIfData extends SwcHTMLDataElementBase {\n  private _swcValue: any = false;\n\n  constructor() {\n    super();\n  }\n\n  set swcValue(val: any) {\n    this._swcValue = val;\n    if (this._masterTplNodes.length === 0) this.initCore();\n    this.render();\n  }\n\n  get swcValue(): any {\n    return this._swcValue;\n  }\n\n  @innerHtml\n  renderTemplate() {\n    return `<slot id=\"tpl-slot\" style=\"display:none;\"></slot>`;\n  }\n\n  connectedCallback() {\n    this.initCore();\n    if (this._masterTplNodes.length > 0) {\n      this.innerHTML = '';\n      this.render();\n    }\n  }\n\n  private render() {\n    const attrValue = this.getAttribute('swc-value') || this.getAttribute('value');\n    if (attrValue !== null && attrValue.includes('{{')) return;\n\n    let displayValue = attrValue !== null ? attrValue : this._swcValue;\n    let isTruthy = !!displayValue;\n    if (typeof displayValue === 'string') {\n      if (displayValue === 'false' || displayValue === '0' || displayValue === '') isTruthy = false;\n      else {\n        try {\n          isTruthy = !!new Function('return ' + displayValue)();\n        } catch (e) {\n          isTruthy = true;\n        }\n      }\n    }\n\n    this.innerHTML = '';\n    if (isTruthy && this._masterTplNodes.length > 0) {\n      this._masterTplNodes.forEach(tplNode => {\n        const clone = tplNode.cloneNode(true) as HTMLElement;\n        this.appendChild(clone);\n        // If it's a Customized Built-in, it might have hidden itself in connectedCallback\n        if (clone.style) clone.style.display = 'contents';\n        this.applyData(clone, this._swcValue);\n      });\n    }\n  }\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;AAAA,eAAyC;AACzC,oCAAuC;;;;;;;;;;AAGhC,IAAM,YAAN,MAAMA,mBAAkB,qDAAsB;EAGnD,cAAA;AACE,UAAK;AAHC,SAAA,YAAiB;EAIzB;EAEA,IAAI,SAAS,KAAQ;AACnB,SAAK,YAAY;AACjB,QAAI,KAAK,gBAAgB,WAAW;AAAG,WAAK,SAAQ;AACpD,SAAK,OAAM;EACb;EAEA,IAAI,WAAQ;AACV,WAAO,KAAK;EACd;EAGA,iBAAc;AACZ,WAAO;EACT;EAEA,oBAAiB;AACf,SAAK,SAAQ;AACb,QAAI,KAAK,gBAAgB,SAAS,GAAG;AACnC,WAAK,YAAY;AACjB,WAAK,OAAM;IACb;EACF;EAEQ,SAAM;AACZ,UAAM,YAAY,KAAK,aAAa,WAAW,KAAK,KAAK,aAAa,OAAO;AAC7E,QAAI,cAAc,QAAQ,UAAU,SAAS,IAAI;AAAG;AAEpD,QAAI,eAAe,cAAc,OAAO,YAAY,KAAK;AACzD,QAAI,WAAW,CAAC,CAAC;AACjB,QAAI,OAAO,iBAAiB,UAAU;AACpC,UAAI,iBAAiB,WAAW,iBAAiB,OAAO,iBAAiB;AAAI,mBAAW;WACnF;AACH,YAAI;AACF,qBAAW,CAAC,CAAC,IAAI,SAAS,YAAY,YAAY,EAAC;QACrD,SAAS,GAAG;AACV,qBAAW;QACb;MACF;IACF;AAEA,SAAK,YAAY;AACjB,QAAI,YAAY,KAAK,gBAAgB,SAAS,GAAG;AAC/C,WAAK,gBAAgB,QAAQ,aAAU;AACrC,cAAM,QAAQ,QAAQ,UAAU,IAAI;AACpC,aAAK,YAAY,KAAK;AAEtB,YAAI,MAAM;AAAO,gBAAM,MAAM,UAAU;AACvC,aAAK,UAAU,OAAO,KAAK,SAAS;MACtC,CAAC;IACH;EACF;;AAvCA,WAAA;EADC;;;;;AAjBU,YAAS,WAAA;MADrB,wBAAc,EAAE,MAAM,eAAe,SAAS,OAAM,CAAE;;GAC1C,SAAS;",
+  "sourcesContent": ["import { elementDefine, innerHtml } from '../index';\nimport { SwcHTMLDataElementBase } from './SwcHTMLDataElementBase';\n\n@elementDefine({ name: 'swc-if-data', extends: 'data' })\nexport class SwcIfData extends SwcHTMLDataElementBase {\n  private _swcValue: any = false;\n\n  constructor() {\n    super();\n  }\n\n  set swcValue(val: any) {\n    this._swcValue = val;\n    if (this._masterTplNodes.length === 0) this.initCore();\n    this.render();\n  }\n\n  get swcValue(): any {\n    return this._swcValue;\n  }\n\n  @innerHtml\n  renderTemplate() {\n    return `<slot id=\"tpl-slot\" style=\"display:none;\"></slot>`;\n  }\n\n  connectedCallback() {\n    this.initCore();\n    if (this._masterTplNodes.length > 0) {\n      this.innerHTML = '';\n      this.render();\n    }\n  }\n\n  private render() {\n    const attrValue = this.getAttribute('swc-value') || this.getAttribute('value');\n    if (attrValue !== null && attrValue.includes('{{')) return;\n\n    let displayValue = attrValue !== null ? attrValue : this._swcValue;\n    let isTruthy = !!displayValue;\n    if (typeof displayValue === 'string') {\n      if (displayValue === 'false' || displayValue === '0' || displayValue === '') isTruthy = false;\n      else {\n        try {\n          isTruthy = !!new Function('return ' + displayValue)();\n        } catch (e) {\n          isTruthy = true;\n        }\n      }\n    }\n\n    this.innerHTML = '';\n    if (isTruthy && this._masterTplNodes.length > 0) {\n      this._masterTplNodes.forEach(tplNode => {\n        const clone = tplNode.cloneNode(true) as HTMLElement;\n        if (clone.style) clone.style.display = 'contents';\n        this.appendChild(clone);\n        this.applyData(clone, this._swcValue);\n      });\n    }\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;AAAA,eAAyC;AACzC,oCAAuC;;;;;;;;;;AAGhC,IAAM,YAAN,MAAMA,mBAAkB,qDAAsB;EAGnD,cAAA;AACE,UAAK;AAHC,SAAA,YAAiB;EAIzB;EAEA,IAAI,SAAS,KAAQ;AACnB,SAAK,YAAY;AACjB,QAAI,KAAK,gBAAgB,WAAW;AAAG,WAAK,SAAQ;AACpD,SAAK,OAAM;EACb;EAEA,IAAI,WAAQ;AACV,WAAO,KAAK;EACd;EAGA,iBAAc;AACZ,WAAO;EACT;EAEA,oBAAiB;AACf,SAAK,SAAQ;AACb,QAAI,KAAK,gBAAgB,SAAS,GAAG;AACnC,WAAK,YAAY;AACjB,WAAK,OAAM;IACb;EACF;EAEQ,SAAM;AACZ,UAAM,YAAY,KAAK,aAAa,WAAW,KAAK,KAAK,aAAa,OAAO;AAC7E,QAAI,cAAc,QAAQ,UAAU,SAAS,IAAI;AAAG;AAEpD,QAAI,eAAe,cAAc,OAAO,YAAY,KAAK;AACzD,QAAI,WAAW,CAAC,CAAC;AACjB,QAAI,OAAO,iBAAiB,UAAU;AACpC,UAAI,iBAAiB,WAAW,iBAAiB,OAAO,iBAAiB;AAAI,mBAAW;WACnF;AACH,YAAI;AACF,qBAAW,CAAC,CAAC,IAAI,SAAS,YAAY,YAAY,EAAC;QACrD,SAAS,GAAG;AACV,qBAAW;QACb;MACF;IACF;AAEA,SAAK,YAAY;AACjB,QAAI,YAAY,KAAK,gBAAgB,SAAS,GAAG;AAC/C,WAAK,gBAAgB,QAAQ,aAAU;AACrC,cAAM,QAAQ,QAAQ,UAAU,IAAI;AACpC,YAAI,MAAM;AAAO,gBAAM,MAAM,UAAU;AACvC,aAAK,YAAY,KAAK;AACtB,aAAK,UAAU,OAAO,KAAK,SAAS;MACtC,CAAC;IACH;EACF;;AAtCA,WAAA;EADC;;;;;AAjBU,YAAS,WAAA;MADrB,wBAAc,EAAE,MAAM,eAAe,SAAS,OAAM,CAAE;;GAC1C,SAAS;",
   "names": ["SwcIfData"]
 }

package/dist/cjs/is/SwcIfDataList.js

@@ -76,9 +76,9 @@ let SwcIfDataList = class SwcIfDataList2 extends import_SwcHTMLDataListElementBa
     if (isTruthy && this._masterTplNodes.length > 0) {
       this._masterTplNodes.forEach((tplNode) => {
         const clone = tplNode.cloneNode(true);
-        this.appendChild(clone);
         if (clone.style)
           clone.style.display = "contents";
+        this.appendChild(clone);
         this.applyData(clone, this._swcValue);
       });
     }

package/dist/cjs/is/SwcIfDataList.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/is/SwcIfDataList.ts"],
-  "sourcesContent": ["import { elementDefine, innerHtml } from '../index';\nimport { SwcHTMLDataListElementBase } from './SwcHTMLDataListElementBase';\n\n@elementDefine({ name: 'swc-if-datalist', extends: 'datalist' })\nexport class SwcIfDataList extends SwcHTMLDataListElementBase {\n  private _swcValue: any = false;\n\n  constructor() {\n    super();\n  }\n\n  set swcValue(val: any) {\n    this._swcValue = val;\n    if (this._masterTplNodes.length === 0) this.initCore();\n    this.render();\n  }\n\n  get swcValue(): any {\n    return this._swcValue;\n  }\n\n  @innerHtml\n  renderTemplate() {\n    return `<slot id=\"tpl-slot\" style=\"display:none;\"></slot>`;\n  }\n\n  connectedCallback() {\n    this.initCore();\n    if (this._masterTplNodes.length > 0) {\n      this.innerHTML = '';\n      this.render();\n    }\n  }\n\n  private render() {\n    const attrValue = this.getAttribute('swc-value') || this.getAttribute('value');\n    if (attrValue !== null && attrValue.includes('{{')) return;\n\n    let displayValue = attrValue !== null ? attrValue : this._swcValue;\n    let isTruthy = !!displayValue;\n    if (typeof displayValue === 'string') {\n      if (displayValue === 'false' || displayValue === '0' || displayValue === '') isTruthy = false;\n      else {\n        try {\n          isTruthy = !!new Function('return ' + displayValue)();\n        } catch (e) {\n          isTruthy = true;\n        }\n      }\n    }\n\n    this.innerHTML = '';\n    if (isTruthy && this._masterTplNodes.length > 0) {\n      this._masterTplNodes.forEach(tplNode => {\n        const clone = tplNode.cloneNode(true) as HTMLElement;\n        this.appendChild(clone);\n        // If it's a Customized Built-in, it might have hidden itself in connectedCallback\n        if (clone.style) clone.style.display = 'contents';\n        this.applyData(clone, this._swcValue);\n      });\n    }\n  }\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;AAAA,eAAyC;AACzC,wCAA2C;;;;;;;;;;AAGpC,IAAM,gBAAN,MAAMA,uBAAsB,6DAA0B;EAG3D,cAAA;AACE,UAAK;AAHC,SAAA,YAAiB;EAIzB;EAEA,IAAI,SAAS,KAAQ;AACnB,SAAK,YAAY;AACjB,QAAI,KAAK,gBAAgB,WAAW;AAAG,WAAK,SAAQ;AACpD,SAAK,OAAM;EACb;EAEA,IAAI,WAAQ;AACV,WAAO,KAAK;EACd;EAGA,iBAAc;AACZ,WAAO;EACT;EAEA,oBAAiB;AACf,SAAK,SAAQ;AACb,QAAI,KAAK,gBAAgB,SAAS,GAAG;AACnC,WAAK,YAAY;AACjB,WAAK,OAAM;IACb;EACF;EAEQ,SAAM;AACZ,UAAM,YAAY,KAAK,aAAa,WAAW,KAAK,KAAK,aAAa,OAAO;AAC7E,QAAI,cAAc,QAAQ,UAAU,SAAS,IAAI;AAAG;AAEpD,QAAI,eAAe,cAAc,OAAO,YAAY,KAAK;AACzD,QAAI,WAAW,CAAC,CAAC;AACjB,QAAI,OAAO,iBAAiB,UAAU;AACpC,UAAI,iBAAiB,WAAW,iBAAiB,OAAO,iBAAiB;AAAI,mBAAW;WACnF;AACH,YAAI;AACF,qBAAW,CAAC,CAAC,IAAI,SAAS,YAAY,YAAY,EAAC;QACrD,SAAS,GAAG;AACV,qBAAW;QACb;MACF;IACF;AAEA,SAAK,YAAY;AACjB,QAAI,YAAY,KAAK,gBAAgB,SAAS,GAAG;AAC/C,WAAK,gBAAgB,QAAQ,aAAU;AACrC,cAAM,QAAQ,QAAQ,UAAU,IAAI;AACpC,aAAK,YAAY,KAAK;AAEtB,YAAI,MAAM;AAAO,gBAAM,MAAM,UAAU;AACvC,aAAK,UAAU,OAAO,KAAK,SAAS;MACtC,CAAC;IACH;EACF;;AAvCA,WAAA;EADC;;;;;AAjBU,gBAAa,WAAA;MADzB,wBAAc,EAAE,MAAM,mBAAmB,SAAS,WAAU,CAAE;;GAClD,aAAa;",
+  "sourcesContent": ["import { elementDefine, innerHtml } from '../index';\nimport { SwcHTMLDataListElementBase } from './SwcHTMLDataListElementBase';\n\n@elementDefine({ name: 'swc-if-datalist', extends: 'datalist' })\nexport class SwcIfDataList extends SwcHTMLDataListElementBase {\n  private _swcValue: any = false;\n\n  constructor() {\n    super();\n  }\n\n  set swcValue(val: any) {\n    this._swcValue = val;\n    if (this._masterTplNodes.length === 0) this.initCore();\n    this.render();\n  }\n\n  get swcValue(): any {\n    return this._swcValue;\n  }\n\n  @innerHtml\n  renderTemplate() {\n    return `<slot id=\"tpl-slot\" style=\"display:none;\"></slot>`;\n  }\n\n  connectedCallback() {\n    this.initCore();\n    if (this._masterTplNodes.length > 0) {\n      this.innerHTML = '';\n      this.render();\n    }\n  }\n\n  private render() {\n    const attrValue = this.getAttribute('swc-value') || this.getAttribute('value');\n    if (attrValue !== null && attrValue.includes('{{')) return;\n\n    let displayValue = attrValue !== null ? attrValue : this._swcValue;\n    let isTruthy = !!displayValue;\n    if (typeof displayValue === 'string') {\n      if (displayValue === 'false' || displayValue === '0' || displayValue === '') isTruthy = false;\n      else {\n        try {\n          isTruthy = !!new Function('return ' + displayValue)();\n        } catch (e) {\n          isTruthy = true;\n        }\n      }\n    }\n\n    this.innerHTML = '';\n    if (isTruthy && this._masterTplNodes.length > 0) {\n      this._masterTplNodes.forEach(tplNode => {\n        const clone = tplNode.cloneNode(true) as HTMLElement;\n        if (clone.style) clone.style.display = 'contents';\n        this.appendChild(clone);\n        this.applyData(clone, this._swcValue);\n      });\n    }\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;AAAA,eAAyC;AACzC,wCAA2C;;;;;;;;;;AAGpC,IAAM,gBAAN,MAAMA,uBAAsB,6DAA0B;EAG3D,cAAA;AACE,UAAK;AAHC,SAAA,YAAiB;EAIzB;EAEA,IAAI,SAAS,KAAQ;AACnB,SAAK,YAAY;AACjB,QAAI,KAAK,gBAAgB,WAAW;AAAG,WAAK,SAAQ;AACpD,SAAK,OAAM;EACb;EAEA,IAAI,WAAQ;AACV,WAAO,KAAK;EACd;EAGA,iBAAc;AACZ,WAAO;EACT;EAEA,oBAAiB;AACf,SAAK,SAAQ;AACb,QAAI,KAAK,gBAAgB,SAAS,GAAG;AACnC,WAAK,YAAY;AACjB,WAAK,OAAM;IACb;EACF;EAEQ,SAAM;AACZ,UAAM,YAAY,KAAK,aAAa,WAAW,KAAK,KAAK,aAAa,OAAO;AAC7E,QAAI,cAAc,QAAQ,UAAU,SAAS,IAAI;AAAG;AAEpD,QAAI,eAAe,cAAc,OAAO,YAAY,KAAK;AACzD,QAAI,WAAW,CAAC,CAAC;AACjB,QAAI,OAAO,iBAAiB,UAAU;AACpC,UAAI,iBAAiB,WAAW,iBAAiB,OAAO,iBAAiB;AAAI,mBAAW;WACnF;AACH,YAAI;AACF,qBAAW,CAAC,CAAC,IAAI,SAAS,YAAY,YAAY,EAAC;QACrD,SAAS,GAAG;AACV,qBAAW;QACb;MACF;IACF;AAEA,SAAK,YAAY;AACjB,QAAI,YAAY,KAAK,gBAAgB,SAAS,GAAG;AAC/C,WAAK,gBAAgB,QAAQ,aAAU;AACrC,cAAM,QAAQ,QAAQ,UAAU,IAAI;AACpC,YAAI,MAAM;AAAO,gBAAM,MAAM,UAAU;AACvC,aAAK,YAAY,KAAK;AACtB,aAAK,UAAU,OAAO,KAAK,SAAS;MACtC,CAAC;IACH;EACF;;AAtCA,WAAA;EADC;;;;;AAjBU,gBAAa,WAAA;MADzB,wBAAc,EAAE,MAAM,mBAAmB,SAAS,WAAU,CAAE;;GAClD,aAAa;",
   "names": ["SwcIfDataList"]
 }

package/dist/cjs/is/SwcIfDetails.js

@@ -76,9 +76,9 @@ let SwcIfDetails = class SwcIfDetails2 extends import_SwcHTMLDetailsElementBase.
     if (isTruthy && this._masterTplNodes.length > 0) {
       this._masterTplNodes.forEach((tplNode) => {
         const clone = tplNode.cloneNode(true);
-        this.appendChild(clone);
         if (clone.style)
           clone.style.display = "contents";
+        this.appendChild(clone);
         this.applyData(clone, this._swcValue);
       });
     }

package/dist/cjs/is/SwcIfDetails.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/is/SwcIfDetails.ts"],
-  "sourcesContent": ["import { elementDefine, innerHtml } from '../index';\nimport { SwcHTMLDetailsElementBase } from './SwcHTMLDetailsElementBase';\n\n@elementDefine({ name: 'swc-if-details', extends: 'details' })\nexport class SwcIfDetails extends SwcHTMLDetailsElementBase {\n  private _swcValue: any = false;\n\n  constructor() {\n    super();\n  }\n\n  set swcValue(val: any) {\n    this._swcValue = val;\n    if (this._masterTplNodes.length === 0) this.initCore();\n    this.render();\n  }\n\n  get swcValue(): any {\n    return this._swcValue;\n  }\n\n  @innerHtml\n  renderTemplate() {\n    return `<slot id=\"tpl-slot\" style=\"display:none;\"></slot>`;\n  }\n\n  connectedCallback() {\n    this.initCore();\n    if (this._masterTplNodes.length > 0) {\n      this.innerHTML = '';\n      this.render();\n    }\n  }\n\n  private render() {\n    const attrValue = this.getAttribute('swc-value') || this.getAttribute('value');\n    if (attrValue !== null && attrValue.includes('{{')) return;\n\n    let displayValue = attrValue !== null ? attrValue : this._swcValue;\n    let isTruthy = !!displayValue;\n    if (typeof displayValue === 'string') {\n      if (displayValue === 'false' || displayValue === '0' || displayValue === '') isTruthy = false;\n      else {\n        try {\n          isTruthy = !!new Function('return ' + displayValue)();\n        } catch (e) {\n          isTruthy = true;\n        }\n      }\n    }\n\n    this.innerHTML = '';\n    if (isTruthy && this._masterTplNodes.length > 0) {\n      this._masterTplNodes.forEach(tplNode => {\n        const clone = tplNode.cloneNode(true) as HTMLElement;\n        this.appendChild(clone);\n        // If it's a Customized Built-in, it might have hidden itself in connectedCallback\n        if (clone.style) clone.style.display = 'contents';\n        this.applyData(clone, this._swcValue);\n      });\n    }\n  }\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;AAAA,eAAyC;AACzC,uCAA0C;;;;;;;;;;AAGnC,IAAM,eAAN,MAAMA,sBAAqB,2DAAyB;EAGzD,cAAA;AACE,UAAK;AAHC,SAAA,YAAiB;EAIzB;EAEA,IAAI,SAAS,KAAQ;AACnB,SAAK,YAAY;AACjB,QAAI,KAAK,gBAAgB,WAAW;AAAG,WAAK,SAAQ;AACpD,SAAK,OAAM;EACb;EAEA,IAAI,WAAQ;AACV,WAAO,KAAK;EACd;EAGA,iBAAc;AACZ,WAAO;EACT;EAEA,oBAAiB;AACf,SAAK,SAAQ;AACb,QAAI,KAAK,gBAAgB,SAAS,GAAG;AACnC,WAAK,YAAY;AACjB,WAAK,OAAM;IACb;EACF;EAEQ,SAAM;AACZ,UAAM,YAAY,KAAK,aAAa,WAAW,KAAK,KAAK,aAAa,OAAO;AAC7E,QAAI,cAAc,QAAQ,UAAU,SAAS,IAAI;AAAG;AAEpD,QAAI,eAAe,cAAc,OAAO,YAAY,KAAK;AACzD,QAAI,WAAW,CAAC,CAAC;AACjB,QAAI,OAAO,iBAAiB,UAAU;AACpC,UAAI,iBAAiB,WAAW,iBAAiB,OAAO,iBAAiB;AAAI,mBAAW;WACnF;AACH,YAAI;AACF,qBAAW,CAAC,CAAC,IAAI,SAAS,YAAY,YAAY,EAAC;QACrD,SAAS,GAAG;AACV,qBAAW;QACb;MACF;IACF;AAEA,SAAK,YAAY;AACjB,QAAI,YAAY,KAAK,gBAAgB,SAAS,GAAG;AAC/C,WAAK,gBAAgB,QAAQ,aAAU;AACrC,cAAM,QAAQ,QAAQ,UAAU,IAAI;AACpC,aAAK,YAAY,KAAK;AAEtB,YAAI,MAAM;AAAO,gBAAM,MAAM,UAAU;AACvC,aAAK,UAAU,OAAO,KAAK,SAAS;MACtC,CAAC;IACH;EACF;;AAvCA,WAAA;EADC;;;;;AAjBU,eAAY,WAAA;MADxB,wBAAc,EAAE,MAAM,kBAAkB,SAAS,UAAS,CAAE;;GAChD,YAAY;",
+  "sourcesContent": ["import { elementDefine, innerHtml } from '../index';\nimport { SwcHTMLDetailsElementBase } from './SwcHTMLDetailsElementBase';\n\n@elementDefine({ name: 'swc-if-details', extends: 'details' })\nexport class SwcIfDetails extends SwcHTMLDetailsElementBase {\n  private _swcValue: any = false;\n\n  constructor() {\n    super();\n  }\n\n  set swcValue(val: any) {\n    this._swcValue = val;\n    if (this._masterTplNodes.length === 0) this.initCore();\n    this.render();\n  }\n\n  get swcValue(): any {\n    return this._swcValue;\n  }\n\n  @innerHtml\n  renderTemplate() {\n    return `<slot id=\"tpl-slot\" style=\"display:none;\"></slot>`;\n  }\n\n  connectedCallback() {\n    this.initCore();\n    if (this._masterTplNodes.length > 0) {\n      this.innerHTML = '';\n      this.render();\n    }\n  }\n\n  private render() {\n    const attrValue = this.getAttribute('swc-value') || this.getAttribute('value');\n    if (attrValue !== null && attrValue.includes('{{')) return;\n\n    let displayValue = attrValue !== null ? attrValue : this._swcValue;\n    let isTruthy = !!displayValue;\n    if (typeof displayValue === 'string') {\n      if (displayValue === 'false' || displayValue === '0' || displayValue === '') isTruthy = false;\n      else {\n        try {\n          isTruthy = !!new Function('return ' + displayValue)();\n        } catch (e) {\n          isTruthy = true;\n        }\n      }\n    }\n\n    this.innerHTML = '';\n    if (isTruthy && this._masterTplNodes.length > 0) {\n      this._masterTplNodes.forEach(tplNode => {\n        const clone = tplNode.cloneNode(true) as HTMLElement;\n        if (clone.style) clone.style.display = 'contents';\n        this.appendChild(clone);\n        this.applyData(clone, this._swcValue);\n      });\n    }\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;AAAA,eAAyC;AACzC,uCAA0C;;;;;;;;;;AAGnC,IAAM,eAAN,MAAMA,sBAAqB,2DAAyB;EAGzD,cAAA;AACE,UAAK;AAHC,SAAA,YAAiB;EAIzB;EAEA,IAAI,SAAS,KAAQ;AACnB,SAAK,YAAY;AACjB,QAAI,KAAK,gBAAgB,WAAW;AAAG,WAAK,SAAQ;AACpD,SAAK,OAAM;EACb;EAEA,IAAI,WAAQ;AACV,WAAO,KAAK;EACd;EAGA,iBAAc;AACZ,WAAO;EACT;EAEA,oBAAiB;AACf,SAAK,SAAQ;AACb,QAAI,KAAK,gBAAgB,SAAS,GAAG;AACnC,WAAK,YAAY;AACjB,WAAK,OAAM;IACb;EACF;EAEQ,SAAM;AACZ,UAAM,YAAY,KAAK,aAAa,WAAW,KAAK,KAAK,aAAa,OAAO;AAC7E,QAAI,cAAc,QAAQ,UAAU,SAAS,IAAI;AAAG;AAEpD,QAAI,eAAe,cAAc,OAAO,YAAY,KAAK;AACzD,QAAI,WAAW,CAAC,CAAC;AACjB,QAAI,OAAO,iBAAiB,UAAU;AACpC,UAAI,iBAAiB,WAAW,iBAAiB,OAAO,iBAAiB;AAAI,mBAAW;WACnF;AACH,YAAI;AACF,qBAAW,CAAC,CAAC,IAAI,SAAS,YAAY,YAAY,EAAC;QACrD,SAAS,GAAG;AACV,qBAAW;QACb;MACF;IACF;AAEA,SAAK,YAAY;AACjB,QAAI,YAAY,KAAK,gBAAgB,SAAS,GAAG;AAC/C,WAAK,gBAAgB,QAAQ,aAAU;AACrC,cAAM,QAAQ,QAAQ,UAAU,IAAI;AACpC,YAAI,MAAM;AAAO,gBAAM,MAAM,UAAU;AACvC,aAAK,YAAY,KAAK;AACtB,aAAK,UAAU,OAAO,KAAK,SAAS;MACtC,CAAC;IACH;EACF;;AAtCA,WAAA;EADC;;;;;AAjBU,eAAY,WAAA;MADxB,wBAAc,EAAE,MAAM,kBAAkB,SAAS,UAAS,CAAE;;GAChD,YAAY;",
   "names": ["SwcIfDetails"]
 }

package/dist/cjs/is/SwcIfDialog.js

@@ -76,9 +76,9 @@ let SwcIfDialog = class SwcIfDialog2 extends import_SwcHTMLDialogElementBase.Swc
     if (isTruthy && this._masterTplNodes.length > 0) {
       this._masterTplNodes.forEach((tplNode) => {
         const clone = tplNode.cloneNode(true);
-        this.appendChild(clone);
         if (clone.style)
           clone.style.display = "contents";
+        this.appendChild(clone);
         this.applyData(clone, this._swcValue);
       });
     }

package/dist/cjs/is/SwcIfDialog.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/is/SwcIfDialog.ts"],
-  "sourcesContent": ["import { elementDefine, innerHtml } from '../index';\nimport { SwcHTMLDialogElementBase } from './SwcHTMLDialogElementBase';\n\n@elementDefine({ name: 'swc-if-dialog', extends: 'dialog' })\nexport class SwcIfDialog extends SwcHTMLDialogElementBase {\n  private _swcValue: any = false;\n\n  constructor() {\n    super();\n  }\n\n  set swcValue(val: any) {\n    this._swcValue = val;\n    if (this._masterTplNodes.length === 0) this.initCore();\n    this.render();\n  }\n\n  get swcValue(): any {\n    return this._swcValue;\n  }\n\n  @innerHtml\n  renderTemplate() {\n    return `<slot id=\"tpl-slot\" style=\"display:none;\"></slot>`;\n  }\n\n  connectedCallback() {\n    this.initCore();\n    if (this._masterTplNodes.length > 0) {\n      this.innerHTML = '';\n      this.render();\n    }\n  }\n\n  private render() {\n    const attrValue = this.getAttribute('swc-value') || this.getAttribute('value');\n    if (attrValue !== null && attrValue.includes('{{')) return;\n\n    let displayValue = attrValue !== null ? attrValue : this._swcValue;\n    let isTruthy = !!displayValue;\n    if (typeof displayValue === 'string') {\n      if (displayValue === 'false' || displayValue === '0' || displayValue === '') isTruthy = false;\n      else {\n        try {\n          isTruthy = !!new Function('return ' + displayValue)();\n        } catch (e) {\n          isTruthy = true;\n        }\n      }\n    }\n\n    this.innerHTML = '';\n    if (isTruthy && this._masterTplNodes.length > 0) {\n      this._masterTplNodes.forEach(tplNode => {\n        const clone = tplNode.cloneNode(true) as HTMLElement;\n        this.appendChild(clone);\n        // If it's a Customized Built-in, it might have hidden itself in connectedCallback\n        if (clone.style) clone.style.display = 'contents';\n        this.applyData(clone, this._swcValue);\n      });\n    }\n  }\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;AAAA,eAAyC;AACzC,sCAAyC;;;;;;;;;;AAGlC,IAAM,cAAN,MAAMA,qBAAoB,yDAAwB;EAGvD,cAAA;AACE,UAAK;AAHC,SAAA,YAAiB;EAIzB;EAEA,IAAI,SAAS,KAAQ;AACnB,SAAK,YAAY;AACjB,QAAI,KAAK,gBAAgB,WAAW;AAAG,WAAK,SAAQ;AACpD,SAAK,OAAM;EACb;EAEA,IAAI,WAAQ;AACV,WAAO,KAAK;EACd;EAGA,iBAAc;AACZ,WAAO;EACT;EAEA,oBAAiB;AACf,SAAK,SAAQ;AACb,QAAI,KAAK,gBAAgB,SAAS,GAAG;AACnC,WAAK,YAAY;AACjB,WAAK,OAAM;IACb;EACF;EAEQ,SAAM;AACZ,UAAM,YAAY,KAAK,aAAa,WAAW,KAAK,KAAK,aAAa,OAAO;AAC7E,QAAI,cAAc,QAAQ,UAAU,SAAS,IAAI;AAAG;AAEpD,QAAI,eAAe,cAAc,OAAO,YAAY,KAAK;AACzD,QAAI,WAAW,CAAC,CAAC;AACjB,QAAI,OAAO,iBAAiB,UAAU;AACpC,UAAI,iBAAiB,WAAW,iBAAiB,OAAO,iBAAiB;AAAI,mBAAW;WACnF;AACH,YAAI;AACF,qBAAW,CAAC,CAAC,IAAI,SAAS,YAAY,YAAY,EAAC;QACrD,SAAS,GAAG;AACV,qBAAW;QACb;MACF;IACF;AAEA,SAAK,YAAY;AACjB,QAAI,YAAY,KAAK,gBAAgB,SAAS,GAAG;AAC/C,WAAK,gBAAgB,QAAQ,aAAU;AACrC,cAAM,QAAQ,QAAQ,UAAU,IAAI;AACpC,aAAK,YAAY,KAAK;AAEtB,YAAI,MAAM;AAAO,gBAAM,MAAM,UAAU;AACvC,aAAK,UAAU,OAAO,KAAK,SAAS;MACtC,CAAC;IACH;EACF;;AAvCA,WAAA;EADC;;;;;AAjBU,cAAW,WAAA;MADvB,wBAAc,EAAE,MAAM,iBAAiB,SAAS,SAAQ,CAAE;;GAC9C,WAAW;",
+  "sourcesContent": ["import { elementDefine, innerHtml } from '../index';\nimport { SwcHTMLDialogElementBase } from './SwcHTMLDialogElementBase';\n\n@elementDefine({ name: 'swc-if-dialog', extends: 'dialog' })\nexport class SwcIfDialog extends SwcHTMLDialogElementBase {\n  private _swcValue: any = false;\n\n  constructor() {\n    super();\n  }\n\n  set swcValue(val: any) {\n    this._swcValue = val;\n    if (this._masterTplNodes.length === 0) this.initCore();\n    this.render();\n  }\n\n  get swcValue(): any {\n    return this._swcValue;\n  }\n\n  @innerHtml\n  renderTemplate() {\n    return `<slot id=\"tpl-slot\" style=\"display:none;\"></slot>`;\n  }\n\n  connectedCallback() {\n    this.initCore();\n    if (this._masterTplNodes.length > 0) {\n      this.innerHTML = '';\n      this.render();\n    }\n  }\n\n  private render() {\n    const attrValue = this.getAttribute('swc-value') || this.getAttribute('value');\n    if (attrValue !== null && attrValue.includes('{{')) return;\n\n    let displayValue = attrValue !== null ? attrValue : this._swcValue;\n    let isTruthy = !!displayValue;\n    if (typeof displayValue === 'string') {\n      if (displayValue === 'false' || displayValue === '0' || displayValue === '') isTruthy = false;\n      else {\n        try {\n          isTruthy = !!new Function('return ' + displayValue)();\n        } catch (e) {\n          isTruthy = true;\n        }\n      }\n    }\n\n    this.innerHTML = '';\n    if (isTruthy && this._masterTplNodes.length > 0) {\n      this._masterTplNodes.forEach(tplNode => {\n        const clone = tplNode.cloneNode(true) as HTMLElement;\n        if (clone.style) clone.style.display = 'contents';\n        this.appendChild(clone);\n        this.applyData(clone, this._swcValue);\n      });\n    }\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;AAAA,eAAyC;AACzC,sCAAyC;;;;;;;;;;AAGlC,IAAM,cAAN,MAAMA,qBAAoB,yDAAwB;EAGvD,cAAA;AACE,UAAK;AAHC,SAAA,YAAiB;EAIzB;EAEA,IAAI,SAAS,KAAQ;AACnB,SAAK,YAAY;AACjB,QAAI,KAAK,gBAAgB,WAAW;AAAG,WAAK,SAAQ;AACpD,SAAK,OAAM;EACb;EAEA,IAAI,WAAQ;AACV,WAAO,KAAK;EACd;EAGA,iBAAc;AACZ,WAAO;EACT;EAEA,oBAAiB;AACf,SAAK,SAAQ;AACb,QAAI,KAAK,gBAAgB,SAAS,GAAG;AACnC,WAAK,YAAY;AACjB,WAAK,OAAM;IACb;EACF;EAEQ,SAAM;AACZ,UAAM,YAAY,KAAK,aAAa,WAAW,KAAK,KAAK,aAAa,OAAO;AAC7E,QAAI,cAAc,QAAQ,UAAU,SAAS,IAAI;AAAG;AAEpD,QAAI,eAAe,cAAc,OAAO,YAAY,KAAK;AACzD,QAAI,WAAW,CAAC,CAAC;AACjB,QAAI,OAAO,iBAAiB,UAAU;AACpC,UAAI,iBAAiB,WAAW,iBAAiB,OAAO,iBAAiB;AAAI,mBAAW;WACnF;AACH,YAAI;AACF,qBAAW,CAAC,CAAC,IAAI,SAAS,YAAY,YAAY,EAAC;QACrD,SAAS,GAAG;AACV,qBAAW;QACb;MACF;IACF;AAEA,SAAK,YAAY;AACjB,QAAI,YAAY,KAAK,gBAAgB,SAAS,GAAG;AAC/C,WAAK,gBAAgB,QAAQ,aAAU;AACrC,cAAM,QAAQ,QAAQ,UAAU,IAAI;AACpC,YAAI,MAAM;AAAO,gBAAM,MAAM,UAAU;AACvC,aAAK,YAAY,KAAK;AACtB,aAAK,UAAU,OAAO,KAAK,SAAS;MACtC,CAAC;IACH;EACF;;AAtCA,WAAA;EADC;;;;;AAjBU,cAAW,WAAA;MADvB,wBAAc,EAAE,MAAM,iBAAiB,SAAS,SAAQ,CAAE;;GAC9C,WAAW;",
   "names": ["SwcIfDialog"]
 }

package/dist/cjs/is/SwcIfDiv.js

@@ -76,9 +76,9 @@ let SwcIfDiv = class SwcIfDiv2 extends import_SwcHTMLDivElementBase.SwcHTMLDivEl
     if (isTruthy && this._masterTplNodes.length > 0) {
       this._masterTplNodes.forEach((tplNode) => {
         const clone = tplNode.cloneNode(true);
-        this.appendChild(clone);
         if (clone.style)
           clone.style.display = "contents";
+        this.appendChild(clone);
         this.applyData(clone, this._swcValue);
       });
     }

package/dist/cjs/is/SwcIfDiv.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/is/SwcIfDiv.ts"],
-  "sourcesContent": ["import { elementDefine, innerHtml } from '../index';\nimport { SwcHTMLDivElementBase } from './SwcHTMLDivElementBase';\n\n@elementDefine({ name: 'swc-if-div', extends: 'div' })\nexport class SwcIfDiv extends SwcHTMLDivElementBase {\n  private _swcValue: any = false;\n\n  constructor() {\n    super();\n  }\n\n  set swcValue(val: any) {\n    this._swcValue = val;\n    if (this._masterTplNodes.length === 0) this.initCore();\n    this.render();\n  }\n\n  get swcValue(): any {\n    return this._swcValue;\n  }\n\n  @innerHtml\n  renderTemplate() {\n    return `<slot id=\"tpl-slot\" style=\"display:none;\"></slot>`;\n  }\n\n  connectedCallback() {\n    this.initCore();\n    if (this._masterTplNodes.length > 0) {\n      this.innerHTML = '';\n      this.render();\n    }\n  }\n\n  private render() {\n    const attrValue = this.getAttribute('swc-value') || this.getAttribute('value');\n    if (attrValue !== null && attrValue.includes('{{')) return;\n\n    let displayValue = attrValue !== null ? attrValue : this._swcValue;\n    let isTruthy = !!displayValue;\n    if (typeof displayValue === 'string') {\n      if (displayValue === 'false' || displayValue === '0' || displayValue === '') isTruthy = false;\n      else {\n        try {\n          isTruthy = !!new Function('return ' + displayValue)();\n        } catch (e) {\n          isTruthy = true;\n        }\n      }\n    }\n\n    this.innerHTML = '';\n    if (isTruthy && this._masterTplNodes.length > 0) {\n      this._masterTplNodes.forEach(tplNode => {\n        const clone = tplNode.cloneNode(true) as HTMLElement;\n        this.appendChild(clone);\n        // If it's a Customized Built-in, it might have hidden itself in connectedCallback\n        if (clone.style) clone.style.display = 'contents';\n        this.applyData(clone, this._swcValue);\n      });\n    }\n  }\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;AAAA,eAAyC;AACzC,mCAAsC;;;;;;;;;;AAG/B,IAAM,WAAN,MAAMA,kBAAiB,mDAAqB;EAGjD,cAAA;AACE,UAAK;AAHC,SAAA,YAAiB;EAIzB;EAEA,IAAI,SAAS,KAAQ;AACnB,SAAK,YAAY;AACjB,QAAI,KAAK,gBAAgB,WAAW;AAAG,WAAK,SAAQ;AACpD,SAAK,OAAM;EACb;EAEA,IAAI,WAAQ;AACV,WAAO,KAAK;EACd;EAGA,iBAAc;AACZ,WAAO;EACT;EAEA,oBAAiB;AACf,SAAK,SAAQ;AACb,QAAI,KAAK,gBAAgB,SAAS,GAAG;AACnC,WAAK,YAAY;AACjB,WAAK,OAAM;IACb;EACF;EAEQ,SAAM;AACZ,UAAM,YAAY,KAAK,aAAa,WAAW,KAAK,KAAK,aAAa,OAAO;AAC7E,QAAI,cAAc,QAAQ,UAAU,SAAS,IAAI;AAAG;AAEpD,QAAI,eAAe,cAAc,OAAO,YAAY,KAAK;AACzD,QAAI,WAAW,CAAC,CAAC;AACjB,QAAI,OAAO,iBAAiB,UAAU;AACpC,UAAI,iBAAiB,WAAW,iBAAiB,OAAO,iBAAiB;AAAI,mBAAW;WACnF;AACH,YAAI;AACF,qBAAW,CAAC,CAAC,IAAI,SAAS,YAAY,YAAY,EAAC;QACrD,SAAS,GAAG;AACV,qBAAW;QACb;MACF;IACF;AAEA,SAAK,YAAY;AACjB,QAAI,YAAY,KAAK,gBAAgB,SAAS,GAAG;AAC/C,WAAK,gBAAgB,QAAQ,aAAU;AACrC,cAAM,QAAQ,QAAQ,UAAU,IAAI;AACpC,aAAK,YAAY,KAAK;AAEtB,YAAI,MAAM;AAAO,gBAAM,MAAM,UAAU;AACvC,aAAK,UAAU,OAAO,KAAK,SAAS;MACtC,CAAC;IACH;EACF;;AAvCA,WAAA;EADC;;;;;AAjBU,WAAQ,WAAA;MADpB,wBAAc,EAAE,MAAM,cAAc,SAAS,MAAK,CAAE;;GACxC,QAAQ;",
+  "sourcesContent": ["import { elementDefine, innerHtml } from '../index';\nimport { SwcHTMLDivElementBase } from './SwcHTMLDivElementBase';\n\n@elementDefine({ name: 'swc-if-div', extends: 'div' })\nexport class SwcIfDiv extends SwcHTMLDivElementBase {\n  private _swcValue: any = false;\n\n  constructor() {\n    super();\n  }\n\n  set swcValue(val: any) {\n    this._swcValue = val;\n    if (this._masterTplNodes.length === 0) this.initCore();\n    this.render();\n  }\n\n  get swcValue(): any {\n    return this._swcValue;\n  }\n\n  @innerHtml\n  renderTemplate() {\n    return `<slot id=\"tpl-slot\" style=\"display:none;\"></slot>`;\n  }\n\n  connectedCallback() {\n    this.initCore();\n    if (this._masterTplNodes.length > 0) {\n      this.innerHTML = '';\n      this.render();\n    }\n  }\n\n  private render() {\n    const attrValue = this.getAttribute('swc-value') || this.getAttribute('value');\n    if (attrValue !== null && attrValue.includes('{{')) return;\n\n    let displayValue = attrValue !== null ? attrValue : this._swcValue;\n    let isTruthy = !!displayValue;\n    if (typeof displayValue === 'string') {\n      if (displayValue === 'false' || displayValue === '0' || displayValue === '') isTruthy = false;\n      else {\n        try {\n          isTruthy = !!new Function('return ' + displayValue)();\n        } catch (e) {\n          isTruthy = true;\n        }\n      }\n    }\n\n    this.innerHTML = '';\n    if (isTruthy && this._masterTplNodes.length > 0) {\n      this._masterTplNodes.forEach(tplNode => {\n        const clone = tplNode.cloneNode(true) as HTMLElement;\n        if (clone.style) clone.style.display = 'contents';\n        this.appendChild(clone);\n        this.applyData(clone, this._swcValue);\n      });\n    }\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;AAAA,eAAyC;AACzC,mCAAsC;;;;;;;;;;AAG/B,IAAM,WAAN,MAAMA,kBAAiB,mDAAqB;EAGjD,cAAA;AACE,UAAK;AAHC,SAAA,YAAiB;EAIzB;EAEA,IAAI,SAAS,KAAQ;AACnB,SAAK,YAAY;AACjB,QAAI,KAAK,gBAAgB,WAAW;AAAG,WAAK,SAAQ;AACpD,SAAK,OAAM;EACb;EAEA,IAAI,WAAQ;AACV,WAAO,KAAK;EACd;EAGA,iBAAc;AACZ,WAAO;EACT;EAEA,oBAAiB;AACf,SAAK,SAAQ;AACb,QAAI,KAAK,gBAAgB,SAAS,GAAG;AACnC,WAAK,YAAY;AACjB,WAAK,OAAM;IACb;EACF;EAEQ,SAAM;AACZ,UAAM,YAAY,KAAK,aAAa,WAAW,KAAK,KAAK,aAAa,OAAO;AAC7E,QAAI,cAAc,QAAQ,UAAU,SAAS,IAAI;AAAG;AAEpD,QAAI,eAAe,cAAc,OAAO,YAAY,KAAK;AACzD,QAAI,WAAW,CAAC,CAAC;AACjB,QAAI,OAAO,iBAAiB,UAAU;AACpC,UAAI,iBAAiB,WAAW,iBAAiB,OAAO,iBAAiB;AAAI,mBAAW;WACnF;AACH,YAAI;AACF,qBAAW,CAAC,CAAC,IAAI,SAAS,YAAY,YAAY,EAAC;QACrD,SAAS,GAAG;AACV,qBAAW;QACb;MACF;IACF;AAEA,SAAK,YAAY;AACjB,QAAI,YAAY,KAAK,gBAAgB,SAAS,GAAG;AAC/C,WAAK,gBAAgB,QAAQ,aAAU;AACrC,cAAM,QAAQ,QAAQ,UAAU,IAAI;AACpC,YAAI,MAAM;AAAO,gBAAM,MAAM,UAAU;AACvC,aAAK,YAAY,KAAK;AACtB,aAAK,UAAU,OAAO,KAAK,SAAS;MACtC,CAAC;IACH;EACF;;AAtCA,WAAA;EADC;;;;;AAjBU,WAAQ,WAAA;MADpB,wBAAc,EAAE,MAAM,cAAc,SAAS,MAAK,CAAE;;GACxC,QAAQ;",
   "names": ["SwcIfDiv"]
 }

package/dist/cjs/is/SwcIfDl.js

@@ -76,9 +76,9 @@ let SwcIfDl = class SwcIfDl2 extends import_SwcHTMLDListElementBase.SwcHTMLDList
     if (isTruthy && this._masterTplNodes.length > 0) {
       this._masterTplNodes.forEach((tplNode) => {
         const clone = tplNode.cloneNode(true);
-        this.appendChild(clone);
         if (clone.style)
           clone.style.display = "contents";
+        this.appendChild(clone);
         this.applyData(clone, this._swcValue);
       });
     }

package/dist/cjs/is/SwcIfDl.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/is/SwcIfDl.ts"],
-  "sourcesContent": ["import { elementDefine, innerHtml } from '../index';\nimport { SwcHTMLDListElementBase } from './SwcHTMLDListElementBase';\n\n@elementDefine({ name: 'swc-if-dl', extends: 'dl' })\nexport class SwcIfDl extends SwcHTMLDListElementBase {\n  private _swcValue: any = false;\n\n  constructor() {\n    super();\n  }\n\n  set swcValue(val: any) {\n    this._swcValue = val;\n    if (this._masterTplNodes.length === 0) this.initCore();\n    this.render();\n  }\n\n  get swcValue(): any {\n    return this._swcValue;\n  }\n\n  @innerHtml\n  renderTemplate() {\n    return `<slot id=\"tpl-slot\" style=\"display:none;\"></slot>`;\n  }\n\n  connectedCallback() {\n    this.initCore();\n    if (this._masterTplNodes.length > 0) {\n      this.innerHTML = '';\n      this.render();\n    }\n  }\n\n  private render() {\n    const attrValue = this.getAttribute('swc-value') || this.getAttribute('value');\n    if (attrValue !== null && attrValue.includes('{{')) return;\n\n    let displayValue = attrValue !== null ? attrValue : this._swcValue;\n    let isTruthy = !!displayValue;\n    if (typeof displayValue === 'string') {\n      if (displayValue === 'false' || displayValue === '0' || displayValue === '') isTruthy = false;\n      else {\n        try {\n          isTruthy = !!new Function('return ' + displayValue)();\n        } catch (e) {\n          isTruthy = true;\n        }\n      }\n    }\n\n    this.innerHTML = '';\n    if (isTruthy && this._masterTplNodes.length > 0) {\n      this._masterTplNodes.forEach(tplNode => {\n        const clone = tplNode.cloneNode(true) as HTMLElement;\n        this.appendChild(clone);\n        // If it's a Customized Built-in, it might have hidden itself in connectedCallback\n        if (clone.style) clone.style.display = 'contents';\n        this.applyData(clone, this._swcValue);\n      });\n    }\n  }\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;AAAA,eAAyC;AACzC,qCAAwC;;;;;;;;;;AAGjC,IAAM,UAAN,MAAMA,iBAAgB,uDAAuB;EAGlD,cAAA;AACE,UAAK;AAHC,SAAA,YAAiB;EAIzB;EAEA,IAAI,SAAS,KAAQ;AACnB,SAAK,YAAY;AACjB,QAAI,KAAK,gBAAgB,WAAW;AAAG,WAAK,SAAQ;AACpD,SAAK,OAAM;EACb;EAEA,IAAI,WAAQ;AACV,WAAO,KAAK;EACd;EAGA,iBAAc;AACZ,WAAO;EACT;EAEA,oBAAiB;AACf,SAAK,SAAQ;AACb,QAAI,KAAK,gBAAgB,SAAS,GAAG;AACnC,WAAK,YAAY;AACjB,WAAK,OAAM;IACb;EACF;EAEQ,SAAM;AACZ,UAAM,YAAY,KAAK,aAAa,WAAW,KAAK,KAAK,aAAa,OAAO;AAC7E,QAAI,cAAc,QAAQ,UAAU,SAAS,IAAI;AAAG;AAEpD,QAAI,eAAe,cAAc,OAAO,YAAY,KAAK;AACzD,QAAI,WAAW,CAAC,CAAC;AACjB,QAAI,OAAO,iBAAiB,UAAU;AACpC,UAAI,iBAAiB,WAAW,iBAAiB,OAAO,iBAAiB;AAAI,mBAAW;WACnF;AACH,YAAI;AACF,qBAAW,CAAC,CAAC,IAAI,SAAS,YAAY,YAAY,EAAC;QACrD,SAAS,GAAG;AACV,qBAAW;QACb;MACF;IACF;AAEA,SAAK,YAAY;AACjB,QAAI,YAAY,KAAK,gBAAgB,SAAS,GAAG;AAC/C,WAAK,gBAAgB,QAAQ,aAAU;AACrC,cAAM,QAAQ,QAAQ,UAAU,IAAI;AACpC,aAAK,YAAY,KAAK;AAEtB,YAAI,MAAM;AAAO,gBAAM,MAAM,UAAU;AACvC,aAAK,UAAU,OAAO,KAAK,SAAS;MACtC,CAAC;IACH;EACF;;AAvCA,WAAA;EADC;;;;;AAjBU,UAAO,WAAA;MADnB,wBAAc,EAAE,MAAM,aAAa,SAAS,KAAI,CAAE;;GACtC,OAAO;",
+  "sourcesContent": ["import { elementDefine, innerHtml } from '../index';\nimport { SwcHTMLDListElementBase } from './SwcHTMLDListElementBase';\n\n@elementDefine({ name: 'swc-if-dl', extends: 'dl' })\nexport class SwcIfDl extends SwcHTMLDListElementBase {\n  private _swcValue: any = false;\n\n  constructor() {\n    super();\n  }\n\n  set swcValue(val: any) {\n    this._swcValue = val;\n    if (this._masterTplNodes.length === 0) this.initCore();\n    this.render();\n  }\n\n  get swcValue(): any {\n    return this._swcValue;\n  }\n\n  @innerHtml\n  renderTemplate() {\n    return `<slot id=\"tpl-slot\" style=\"display:none;\"></slot>`;\n  }\n\n  connectedCallback() {\n    this.initCore();\n    if (this._masterTplNodes.length > 0) {\n      this.innerHTML = '';\n      this.render();\n    }\n  }\n\n  private render() {\n    const attrValue = this.getAttribute('swc-value') || this.getAttribute('value');\n    if (attrValue !== null && attrValue.includes('{{')) return;\n\n    let displayValue = attrValue !== null ? attrValue : this._swcValue;\n    let isTruthy = !!displayValue;\n    if (typeof displayValue === 'string') {\n      if (displayValue === 'false' || displayValue === '0' || displayValue === '') isTruthy = false;\n      else {\n        try {\n          isTruthy = !!new Function('return ' + displayValue)();\n        } catch (e) {\n          isTruthy = true;\n        }\n      }\n    }\n\n    this.innerHTML = '';\n    if (isTruthy && this._masterTplNodes.length > 0) {\n      this._masterTplNodes.forEach(tplNode => {\n        const clone = tplNode.cloneNode(true) as HTMLElement;\n        if (clone.style) clone.style.display = 'contents';\n        this.appendChild(clone);\n        this.applyData(clone, this._swcValue);\n      });\n    }\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;AAAA,eAAyC;AACzC,qCAAwC;;;;;;;;;;AAGjC,IAAM,UAAN,MAAMA,iBAAgB,uDAAuB;EAGlD,cAAA;AACE,UAAK;AAHC,SAAA,YAAiB;EAIzB;EAEA,IAAI,SAAS,KAAQ;AACnB,SAAK,YAAY;AACjB,QAAI,KAAK,gBAAgB,WAAW;AAAG,WAAK,SAAQ;AACpD,SAAK,OAAM;EACb;EAEA,IAAI,WAAQ;AACV,WAAO,KAAK;EACd;EAGA,iBAAc;AACZ,WAAO;EACT;EAEA,oBAAiB;AACf,SAAK,SAAQ;AACb,QAAI,KAAK,gBAAgB,SAAS,GAAG;AACnC,WAAK,YAAY;AACjB,WAAK,OAAM;IACb;EACF;EAEQ,SAAM;AACZ,UAAM,YAAY,KAAK,aAAa,WAAW,KAAK,KAAK,aAAa,OAAO;AAC7E,QAAI,cAAc,QAAQ,UAAU,SAAS,IAAI;AAAG;AAEpD,QAAI,eAAe,cAAc,OAAO,YAAY,KAAK;AACzD,QAAI,WAAW,CAAC,CAAC;AACjB,QAAI,OAAO,iBAAiB,UAAU;AACpC,UAAI,iBAAiB,WAAW,iBAAiB,OAAO,iBAAiB;AAAI,mBAAW;WACnF;AACH,YAAI;AACF,qBAAW,CAAC,CAAC,IAAI,SAAS,YAAY,YAAY,EAAC;QACrD,SAAS,GAAG;AACV,qBAAW;QACb;MACF;IACF;AAEA,SAAK,YAAY;AACjB,QAAI,YAAY,KAAK,gBAAgB,SAAS,GAAG;AAC/C,WAAK,gBAAgB,QAAQ,aAAU;AACrC,cAAM,QAAQ,QAAQ,UAAU,IAAI;AACpC,YAAI,MAAM;AAAO,gBAAM,MAAM,UAAU;AACvC,aAAK,YAAY,KAAK;AACtB,aAAK,UAAU,OAAO,KAAK,SAAS;MACtC,CAAC;IACH;EACF;;AAtCA,WAAA;EADC;;;;;AAjBU,UAAO,WAAA;MADnB,wBAAc,EAAE,MAAM,aAAa,SAAS,KAAI,CAAE;;GACtC,OAAO;",
   "names": ["SwcIfDl"]
 }

package/dist/cjs/is/SwcIfEmbed.js

@@ -76,9 +76,9 @@ let SwcIfEmbed = class SwcIfEmbed2 extends import_SwcHTMLEmbedElementBase.SwcHTM
     if (isTruthy && this._masterTplNodes.length > 0) {
       this._masterTplNodes.forEach((tplNode) => {
         const clone = tplNode.cloneNode(true);
-        this.appendChild(clone);
         if (clone.style)
           clone.style.display = "contents";
+        this.appendChild(clone);
         this.applyData(clone, this._swcValue);
       });
     }

package/dist/cjs/is/SwcIfEmbed.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/is/SwcIfEmbed.ts"],
-  "sourcesContent": ["import { elementDefine, innerHtml } from '../index';\nimport { SwcHTMLEmbedElementBase } from './SwcHTMLEmbedElementBase';\n\n@elementDefine({ name: 'swc-if-embed', extends: 'embed' })\nexport class SwcIfEmbed extends SwcHTMLEmbedElementBase {\n  private _swcValue: any = false;\n\n  constructor() {\n    super();\n  }\n\n  set swcValue(val: any) {\n    this._swcValue = val;\n    if (this._masterTplNodes.length === 0) this.initCore();\n    this.render();\n  }\n\n  get swcValue(): any {\n    return this._swcValue;\n  }\n\n  @innerHtml\n  renderTemplate() {\n    return `<slot id=\"tpl-slot\" style=\"display:none;\"></slot>`;\n  }\n\n  connectedCallback() {\n    this.initCore();\n    if (this._masterTplNodes.length > 0) {\n      this.innerHTML = '';\n      this.render();\n    }\n  }\n\n  private render() {\n    const attrValue = this.getAttribute('swc-value') || this.getAttribute('value');\n    if (attrValue !== null && attrValue.includes('{{')) return;\n\n    let displayValue = attrValue !== null ? attrValue : this._swcValue;\n    let isTruthy = !!displayValue;\n    if (typeof displayValue === 'string') {\n      if (displayValue === 'false' || displayValue === '0' || displayValue === '') isTruthy = false;\n      else {\n        try {\n          isTruthy = !!new Function('return ' + displayValue)();\n        } catch (e) {\n          isTruthy = true;\n        }\n      }\n    }\n\n    this.innerHTML = '';\n    if (isTruthy && this._masterTplNodes.length > 0) {\n      this._masterTplNodes.forEach(tplNode => {\n        const clone = tplNode.cloneNode(true) as HTMLElement;\n        this.appendChild(clone);\n        // If it's a Customized Built-in, it might have hidden itself in connectedCallback\n        if (clone.style) clone.style.display = 'contents';\n        this.applyData(clone, this._swcValue);\n      });\n    }\n  }\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;AAAA,eAAyC;AACzC,qCAAwC;;;;;;;;;;AAGjC,IAAM,aAAN,MAAMA,oBAAmB,uDAAuB;EAGrD,cAAA;AACE,UAAK;AAHC,SAAA,YAAiB;EAIzB;EAEA,IAAI,SAAS,KAAQ;AACnB,SAAK,YAAY;AACjB,QAAI,KAAK,gBAAgB,WAAW;AAAG,WAAK,SAAQ;AACpD,SAAK,OAAM;EACb;EAEA,IAAI,WAAQ;AACV,WAAO,KAAK;EACd;EAGA,iBAAc;AACZ,WAAO;EACT;EAEA,oBAAiB;AACf,SAAK,SAAQ;AACb,QAAI,KAAK,gBAAgB,SAAS,GAAG;AACnC,WAAK,YAAY;AACjB,WAAK,OAAM;IACb;EACF;EAEQ,SAAM;AACZ,UAAM,YAAY,KAAK,aAAa,WAAW,KAAK,KAAK,aAAa,OAAO;AAC7E,QAAI,cAAc,QAAQ,UAAU,SAAS,IAAI;AAAG;AAEpD,QAAI,eAAe,cAAc,OAAO,YAAY,KAAK;AACzD,QAAI,WAAW,CAAC,CAAC;AACjB,QAAI,OAAO,iBAAiB,UAAU;AACpC,UAAI,iBAAiB,WAAW,iBAAiB,OAAO,iBAAiB;AAAI,mBAAW;WACnF;AACH,YAAI;AACF,qBAAW,CAAC,CAAC,IAAI,SAAS,YAAY,YAAY,EAAC;QACrD,SAAS,GAAG;AACV,qBAAW;QACb;MACF;IACF;AAEA,SAAK,YAAY;AACjB,QAAI,YAAY,KAAK,gBAAgB,SAAS,GAAG;AAC/C,WAAK,gBAAgB,QAAQ,aAAU;AACrC,cAAM,QAAQ,QAAQ,UAAU,IAAI;AACpC,aAAK,YAAY,KAAK;AAEtB,YAAI,MAAM;AAAO,gBAAM,MAAM,UAAU;AACvC,aAAK,UAAU,OAAO,KAAK,SAAS;MACtC,CAAC;IACH;EACF;;AAvCA,WAAA;EADC;;;;;AAjBU,aAAU,WAAA;MADtB,wBAAc,EAAE,MAAM,gBAAgB,SAAS,QAAO,CAAE;;GAC5C,UAAU;",
+  "sourcesContent": ["import { elementDefine, innerHtml } from '../index';\nimport { SwcHTMLEmbedElementBase } from './SwcHTMLEmbedElementBase';\n\n@elementDefine({ name: 'swc-if-embed', extends: 'embed' })\nexport class SwcIfEmbed extends SwcHTMLEmbedElementBase {\n  private _swcValue: any = false;\n\n  constructor() {\n    super();\n  }\n\n  set swcValue(val: any) {\n    this._swcValue = val;\n    if (this._masterTplNodes.length === 0) this.initCore();\n    this.render();\n  }\n\n  get swcValue(): any {\n    return this._swcValue;\n  }\n\n  @innerHtml\n  renderTemplate() {\n    return `<slot id=\"tpl-slot\" style=\"display:none;\"></slot>`;\n  }\n\n  connectedCallback() {\n    this.initCore();\n    if (this._masterTplNodes.length > 0) {\n      this.innerHTML = '';\n      this.render();\n    }\n  }\n\n  private render() {\n    const attrValue = this.getAttribute('swc-value') || this.getAttribute('value');\n    if (attrValue !== null && attrValue.includes('{{')) return;\n\n    let displayValue = attrValue !== null ? attrValue : this._swcValue;\n    let isTruthy = !!displayValue;\n    if (typeof displayValue === 'string') {\n      if (displayValue === 'false' || displayValue === '0' || displayValue === '') isTruthy = false;\n      else {\n        try {\n          isTruthy = !!new Function('return ' + displayValue)();\n        } catch (e) {\n          isTruthy = true;\n        }\n      }\n    }\n\n    this.innerHTML = '';\n    if (isTruthy && this._masterTplNodes.length > 0) {\n      this._masterTplNodes.forEach(tplNode => {\n        const clone = tplNode.cloneNode(true) as HTMLElement;\n        if (clone.style) clone.style.display = 'contents';\n        this.appendChild(clone);\n        this.applyData(clone, this._swcValue);\n      });\n    }\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;AAAA,eAAyC;AACzC,qCAAwC;;;;;;;;;;AAGjC,IAAM,aAAN,MAAMA,oBAAmB,uDAAuB;EAGrD,cAAA;AACE,UAAK;AAHC,SAAA,YAAiB;EAIzB;EAEA,IAAI,SAAS,KAAQ;AACnB,SAAK,YAAY;AACjB,QAAI,KAAK,gBAAgB,WAAW;AAAG,WAAK,SAAQ;AACpD,SAAK,OAAM;EACb;EAEA,IAAI,WAAQ;AACV,WAAO,KAAK;EACd;EAGA,iBAAc;AACZ,WAAO;EACT;EAEA,oBAAiB;AACf,SAAK,SAAQ;AACb,QAAI,KAAK,gBAAgB,SAAS,GAAG;AACnC,WAAK,YAAY;AACjB,WAAK,OAAM;IACb;EACF;EAEQ,SAAM;AACZ,UAAM,YAAY,KAAK,aAAa,WAAW,KAAK,KAAK,aAAa,OAAO;AAC7E,QAAI,cAAc,QAAQ,UAAU,SAAS,IAAI;AAAG;AAEpD,QAAI,eAAe,cAAc,OAAO,YAAY,KAAK;AACzD,QAAI,WAAW,CAAC,CAAC;AACjB,QAAI,OAAO,iBAAiB,UAAU;AACpC,UAAI,iBAAiB,WAAW,iBAAiB,OAAO,iBAAiB;AAAI,mBAAW;WACnF;AACH,YAAI;AACF,qBAAW,CAAC,CAAC,IAAI,SAAS,YAAY,YAAY,EAAC;QACrD,SAAS,GAAG;AACV,qBAAW;QACb;MACF;IACF;AAEA,SAAK,YAAY;AACjB,QAAI,YAAY,KAAK,gBAAgB,SAAS,GAAG;AAC/C,WAAK,gBAAgB,QAAQ,aAAU;AACrC,cAAM,QAAQ,QAAQ,UAAU,IAAI;AACpC,YAAI,MAAM;AAAO,gBAAM,MAAM,UAAU;AACvC,aAAK,YAAY,KAAK;AACtB,aAAK,UAAU,OAAO,KAAK,SAAS;MACtC,CAAC;IACH;EACF;;AAtCA,WAAA;EADC;;;;;AAjBU,aAAU,WAAA;MADtB,wBAAc,EAAE,MAAM,gBAAgB,SAAS,QAAO,CAAE;;GAC5C,UAAU;",
   "names": ["SwcIfEmbed"]
 }

package/dist/cjs/is/SwcIfFieldSet.js

@@ -76,9 +76,9 @@ let SwcIfFieldSet = class SwcIfFieldSet2 extends import_SwcHTMLFieldSetElementBa
     if (isTruthy && this._masterTplNodes.length > 0) {
       this._masterTplNodes.forEach((tplNode) => {
         const clone = tplNode.cloneNode(true);
-        this.appendChild(clone);
         if (clone.style)
           clone.style.display = "contents";
+        this.appendChild(clone);
         this.applyData(clone, this._swcValue);
       });
     }

package/dist/cjs/is/SwcIfFieldSet.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/is/SwcIfFieldSet.ts"],
-  "sourcesContent": ["import { elementDefine, innerHtml } from '../index';\nimport { SwcHTMLFieldSetElementBase } from './SwcHTMLFieldSetElementBase';\n\n@elementDefine({ name: 'swc-if-fieldset', extends: 'fieldset' })\nexport class SwcIfFieldSet extends SwcHTMLFieldSetElementBase {\n  private _swcValue: any = false;\n\n  constructor() {\n    super();\n  }\n\n  set swcValue(val: any) {\n    this._swcValue = val;\n    if (this._masterTplNodes.length === 0) this.initCore();\n    this.render();\n  }\n\n  get swcValue(): any {\n    return this._swcValue;\n  }\n\n  @innerHtml\n  renderTemplate() {\n    return `<slot id=\"tpl-slot\" style=\"display:none;\"></slot>`;\n  }\n\n  connectedCallback() {\n    this.initCore();\n    if (this._masterTplNodes.length > 0) {\n      this.innerHTML = '';\n      this.render();\n    }\n  }\n\n  private render() {\n    const attrValue = this.getAttribute('swc-value') || this.getAttribute('value');\n    if (attrValue !== null && attrValue.includes('{{')) return;\n\n    let displayValue = attrValue !== null ? attrValue : this._swcValue;\n    let isTruthy = !!displayValue;\n    if (typeof displayValue === 'string') {\n      if (displayValue === 'false' || displayValue === '0' || displayValue === '') isTruthy = false;\n      else {\n        try {\n          isTruthy = !!new Function('return ' + displayValue)();\n        } catch (e) {\n          isTruthy = true;\n        }\n      }\n    }\n\n    this.innerHTML = '';\n    if (isTruthy && this._masterTplNodes.length > 0) {\n      this._masterTplNodes.forEach(tplNode => {\n        const clone = tplNode.cloneNode(true) as HTMLElement;\n        this.appendChild(clone);\n        // If it's a Customized Built-in, it might have hidden itself in connectedCallback\n        if (clone.style) clone.style.display = 'contents';\n        this.applyData(clone, this._swcValue);\n      });\n    }\n  }\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;AAAA,eAAyC;AACzC,wCAA2C;;;;;;;;;;AAGpC,IAAM,gBAAN,MAAMA,uBAAsB,6DAA0B;EAG3D,cAAA;AACE,UAAK;AAHC,SAAA,YAAiB;EAIzB;EAEA,IAAI,SAAS,KAAQ;AACnB,SAAK,YAAY;AACjB,QAAI,KAAK,gBAAgB,WAAW;AAAG,WAAK,SAAQ;AACpD,SAAK,OAAM;EACb;EAEA,IAAI,WAAQ;AACV,WAAO,KAAK;EACd;EAGA,iBAAc;AACZ,WAAO;EACT;EAEA,oBAAiB;AACf,SAAK,SAAQ;AACb,QAAI,KAAK,gBAAgB,SAAS,GAAG;AACnC,WAAK,YAAY;AACjB,WAAK,OAAM;IACb;EACF;EAEQ,SAAM;AACZ,UAAM,YAAY,KAAK,aAAa,WAAW,KAAK,KAAK,aAAa,OAAO;AAC7E,QAAI,cAAc,QAAQ,UAAU,SAAS,IAAI;AAAG;AAEpD,QAAI,eAAe,cAAc,OAAO,YAAY,KAAK;AACzD,QAAI,WAAW,CAAC,CAAC;AACjB,QAAI,OAAO,iBAAiB,UAAU;AACpC,UAAI,iBAAiB,WAAW,iBAAiB,OAAO,iBAAiB;AAAI,mBAAW;WACnF;AACH,YAAI;AACF,qBAAW,CAAC,CAAC,IAAI,SAAS,YAAY,YAAY,EAAC;QACrD,SAAS,GAAG;AACV,qBAAW;QACb;MACF;IACF;AAEA,SAAK,YAAY;AACjB,QAAI,YAAY,KAAK,gBAAgB,SAAS,GAAG;AAC/C,WAAK,gBAAgB,QAAQ,aAAU;AACrC,cAAM,QAAQ,QAAQ,UAAU,IAAI;AACpC,aAAK,YAAY,KAAK;AAEtB,YAAI,MAAM;AAAO,gBAAM,MAAM,UAAU;AACvC,aAAK,UAAU,OAAO,KAAK,SAAS;MACtC,CAAC;IACH;EACF;;AAvCA,WAAA;EADC;;;;;AAjBU,gBAAa,WAAA;MADzB,wBAAc,EAAE,MAAM,mBAAmB,SAAS,WAAU,CAAE;;GAClD,aAAa;",
+  "sourcesContent": ["import { elementDefine, innerHtml } from '../index';\nimport { SwcHTMLFieldSetElementBase } from './SwcHTMLFieldSetElementBase';\n\n@elementDefine({ name: 'swc-if-fieldset', extends: 'fieldset' })\nexport class SwcIfFieldSet extends SwcHTMLFieldSetElementBase {\n  private _swcValue: any = false;\n\n  constructor() {\n    super();\n  }\n\n  set swcValue(val: any) {\n    this._swcValue = val;\n    if (this._masterTplNodes.length === 0) this.initCore();\n    this.render();\n  }\n\n  get swcValue(): any {\n    return this._swcValue;\n  }\n\n  @innerHtml\n  renderTemplate() {\n    return `<slot id=\"tpl-slot\" style=\"display:none;\"></slot>`;\n  }\n\n  connectedCallback() {\n    this.initCore();\n    if (this._masterTplNodes.length > 0) {\n      this.innerHTML = '';\n      this.render();\n    }\n  }\n\n  private render() {\n    const attrValue = this.getAttribute('swc-value') || this.getAttribute('value');\n    if (attrValue !== null && attrValue.includes('{{')) return;\n\n    let displayValue = attrValue !== null ? attrValue : this._swcValue;\n    let isTruthy = !!displayValue;\n    if (typeof displayValue === 'string') {\n      if (displayValue === 'false' || displayValue === '0' || displayValue === '') isTruthy = false;\n      else {\n        try {\n          isTruthy = !!new Function('return ' + displayValue)();\n        } catch (e) {\n          isTruthy = true;\n        }\n      }\n    }\n\n    this.innerHTML = '';\n    if (isTruthy && this._masterTplNodes.length > 0) {\n      this._masterTplNodes.forEach(tplNode => {\n        const clone = tplNode.cloneNode(true) as HTMLElement;\n        if (clone.style) clone.style.display = 'contents';\n        this.appendChild(clone);\n        this.applyData(clone, this._swcValue);\n      });\n    }\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;AAAA,eAAyC;AACzC,wCAA2C;;;;;;;;;;AAGpC,IAAM,gBAAN,MAAMA,uBAAsB,6DAA0B;EAG3D,cAAA;AACE,UAAK;AAHC,SAAA,YAAiB;EAIzB;EAEA,IAAI,SAAS,KAAQ;AACnB,SAAK,YAAY;AACjB,QAAI,KAAK,gBAAgB,WAAW;AAAG,WAAK,SAAQ;AACpD,SAAK,OAAM;EACb;EAEA,IAAI,WAAQ;AACV,WAAO,KAAK;EACd;EAGA,iBAAc;AACZ,WAAO;EACT;EAEA,oBAAiB;AACf,SAAK,SAAQ;AACb,QAAI,KAAK,gBAAgB,SAAS,GAAG;AACnC,WAAK,YAAY;AACjB,WAAK,OAAM;IACb;EACF;EAEQ,SAAM;AACZ,UAAM,YAAY,KAAK,aAAa,WAAW,KAAK,KAAK,aAAa,OAAO;AAC7E,QAAI,cAAc,QAAQ,UAAU,SAAS,IAAI;AAAG;AAEpD,QAAI,eAAe,cAAc,OAAO,YAAY,KAAK;AACzD,QAAI,WAAW,CAAC,CAAC;AACjB,QAAI,OAAO,iBAAiB,UAAU;AACpC,UAAI,iBAAiB,WAAW,iBAAiB,OAAO,iBAAiB;AAAI,mBAAW;WACnF;AACH,YAAI;AACF,qBAAW,CAAC,CAAC,IAAI,SAAS,YAAY,YAAY,EAAC;QACrD,SAAS,GAAG;AACV,qBAAW;QACb;MACF;IACF;AAEA,SAAK,YAAY;AACjB,QAAI,YAAY,KAAK,gBAAgB,SAAS,GAAG;AAC/C,WAAK,gBAAgB,QAAQ,aAAU;AACrC,cAAM,QAAQ,QAAQ,UAAU,IAAI;AACpC,YAAI,MAAM;AAAO,gBAAM,MAAM,UAAU;AACvC,aAAK,YAAY,KAAK;AACtB,aAAK,UAAU,OAAO,KAAK,SAAS;MACtC,CAAC;IACH;EACF;;AAtCA,WAAA;EADC;;;;;AAjBU,gBAAa,WAAA;MADzB,wBAAc,EAAE,MAAM,mBAAmB,SAAS,WAAU,CAAE;;GAClD,aAAa;",
   "names": ["SwcIfFieldSet"]
 }

package/dist/cjs/is/SwcIfForm.js

@@ -76,9 +76,9 @@ let SwcIfForm = class SwcIfForm2 extends import_SwcHTMLFormElementBase.SwcHTMLFo
     if (isTruthy && this._masterTplNodes.length > 0) {
       this._masterTplNodes.forEach((tplNode) => {
         const clone = tplNode.cloneNode(true);
-        this.appendChild(clone);
         if (clone.style)
           clone.style.display = "contents";
+        this.appendChild(clone);
         this.applyData(clone, this._swcValue);
       });
     }

package/dist/cjs/is/SwcIfForm.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/is/SwcIfForm.ts"],
-  "sourcesContent": ["import { elementDefine, innerHtml } from '../index';\nimport { SwcHTMLFormElementBase } from './SwcHTMLFormElementBase';\n\n@elementDefine({ name: 'swc-if-form', extends: 'form' })\nexport class SwcIfForm extends SwcHTMLFormElementBase {\n  private _swcValue: any = false;\n\n  constructor() {\n    super();\n  }\n\n  set swcValue(val: any) {\n    this._swcValue = val;\n    if (this._masterTplNodes.length === 0) this.initCore();\n    this.render();\n  }\n\n  get swcValue(): any {\n    return this._swcValue;\n  }\n\n  @innerHtml\n  renderTemplate() {\n    return `<slot id=\"tpl-slot\" style=\"display:none;\"></slot>`;\n  }\n\n  connectedCallback() {\n    this.initCore();\n    if (this._masterTplNodes.length > 0) {\n      this.innerHTML = '';\n      this.render();\n    }\n  }\n\n  private render() {\n    const attrValue = this.getAttribute('swc-value') || this.getAttribute('value');\n    if (attrValue !== null && attrValue.includes('{{')) return;\n\n    let displayValue = attrValue !== null ? attrValue : this._swcValue;\n    let isTruthy = !!displayValue;\n    if (typeof displayValue === 'string') {\n      if (displayValue === 'false' || displayValue === '0' || displayValue === '') isTruthy = false;\n      else {\n        try {\n          isTruthy = !!new Function('return ' + displayValue)();\n        } catch (e) {\n          isTruthy = true;\n        }\n      }\n    }\n\n    this.innerHTML = '';\n    if (isTruthy && this._masterTplNodes.length > 0) {\n      this._masterTplNodes.forEach(tplNode => {\n        const clone = tplNode.cloneNode(true) as HTMLElement;\n        this.appendChild(clone);\n        // If it's a Customized Built-in, it might have hidden itself in connectedCallback\n        if (clone.style) clone.style.display = 'contents';\n        this.applyData(clone, this._swcValue);\n      });\n    }\n  }\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;AAAA,eAAyC;AACzC,oCAAuC;;;;;;;;;;AAGhC,IAAM,YAAN,MAAMA,mBAAkB,qDAAsB;EAGnD,cAAA;AACE,UAAK;AAHC,SAAA,YAAiB;EAIzB;EAEA,IAAI,SAAS,KAAQ;AACnB,SAAK,YAAY;AACjB,QAAI,KAAK,gBAAgB,WAAW;AAAG,WAAK,SAAQ;AACpD,SAAK,OAAM;EACb;EAEA,IAAI,WAAQ;AACV,WAAO,KAAK;EACd;EAGA,iBAAc;AACZ,WAAO;EACT;EAEA,oBAAiB;AACf,SAAK,SAAQ;AACb,QAAI,KAAK,gBAAgB,SAAS,GAAG;AACnC,WAAK,YAAY;AACjB,WAAK,OAAM;IACb;EACF;EAEQ,SAAM;AACZ,UAAM,YAAY,KAAK,aAAa,WAAW,KAAK,KAAK,aAAa,OAAO;AAC7E,QAAI,cAAc,QAAQ,UAAU,SAAS,IAAI;AAAG;AAEpD,QAAI,eAAe,cAAc,OAAO,YAAY,KAAK;AACzD,QAAI,WAAW,CAAC,CAAC;AACjB,QAAI,OAAO,iBAAiB,UAAU;AACpC,UAAI,iBAAiB,WAAW,iBAAiB,OAAO,iBAAiB;AAAI,mBAAW;WACnF;AACH,YAAI;AACF,qBAAW,CAAC,CAAC,IAAI,SAAS,YAAY,YAAY,EAAC;QACrD,SAAS,GAAG;AACV,qBAAW;QACb;MACF;IACF;AAEA,SAAK,YAAY;AACjB,QAAI,YAAY,KAAK,gBAAgB,SAAS,GAAG;AAC/C,WAAK,gBAAgB,QAAQ,aAAU;AACrC,cAAM,QAAQ,QAAQ,UAAU,IAAI;AACpC,aAAK,YAAY,KAAK;AAEtB,YAAI,MAAM;AAAO,gBAAM,MAAM,UAAU;AACvC,aAAK,UAAU,OAAO,KAAK,SAAS;MACtC,CAAC;IACH;EACF;;AAvCA,WAAA;EADC;;;;;AAjBU,YAAS,WAAA;MADrB,wBAAc,EAAE,MAAM,eAAe,SAAS,OAAM,CAAE;;GAC1C,SAAS;",
+  "sourcesContent": ["import { elementDefine, innerHtml } from '../index';\nimport { SwcHTMLFormElementBase } from './SwcHTMLFormElementBase';\n\n@elementDefine({ name: 'swc-if-form', extends: 'form' })\nexport class SwcIfForm extends SwcHTMLFormElementBase {\n  private _swcValue: any = false;\n\n  constructor() {\n    super();\n  }\n\n  set swcValue(val: any) {\n    this._swcValue = val;\n    if (this._masterTplNodes.length === 0) this.initCore();\n    this.render();\n  }\n\n  get swcValue(): any {\n    return this._swcValue;\n  }\n\n  @innerHtml\n  renderTemplate() {\n    return `<slot id=\"tpl-slot\" style=\"display:none;\"></slot>`;\n  }\n\n  connectedCallback() {\n    this.initCore();\n    if (this._masterTplNodes.length > 0) {\n      this.innerHTML = '';\n      this.render();\n    }\n  }\n\n  private render() {\n    const attrValue = this.getAttribute('swc-value') || this.getAttribute('value');\n    if (attrValue !== null && attrValue.includes('{{')) return;\n\n    let displayValue = attrValue !== null ? attrValue : this._swcValue;\n    let isTruthy = !!displayValue;\n    if (typeof displayValue === 'string') {\n      if (displayValue === 'false' || displayValue === '0' || displayValue === '') isTruthy = false;\n      else {\n        try {\n          isTruthy = !!new Function('return ' + displayValue)();\n        } catch (e) {\n          isTruthy = true;\n        }\n      }\n    }\n\n    this.innerHTML = '';\n    if (isTruthy && this._masterTplNodes.length > 0) {\n      this._masterTplNodes.forEach(tplNode => {\n        const clone = tplNode.cloneNode(true) as HTMLElement;\n        if (clone.style) clone.style.display = 'contents';\n        this.appendChild(clone);\n        this.applyData(clone, this._swcValue);\n      });\n    }\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;AAAA,eAAyC;AACzC,oCAAuC;;;;;;;;;;AAGhC,IAAM,YAAN,MAAMA,mBAAkB,qDAAsB;EAGnD,cAAA;AACE,UAAK;AAHC,SAAA,YAAiB;EAIzB;EAEA,IAAI,SAAS,KAAQ;AACnB,SAAK,YAAY;AACjB,QAAI,KAAK,gBAAgB,WAAW;AAAG,WAAK,SAAQ;AACpD,SAAK,OAAM;EACb;EAEA,IAAI,WAAQ;AACV,WAAO,KAAK;EACd;EAGA,iBAAc;AACZ,WAAO;EACT;EAEA,oBAAiB;AACf,SAAK,SAAQ;AACb,QAAI,KAAK,gBAAgB,SAAS,GAAG;AACnC,WAAK,YAAY;AACjB,WAAK,OAAM;IACb;EACF;EAEQ,SAAM;AACZ,UAAM,YAAY,KAAK,aAAa,WAAW,KAAK,KAAK,aAAa,OAAO;AAC7E,QAAI,cAAc,QAAQ,UAAU,SAAS,IAAI;AAAG;AAEpD,QAAI,eAAe,cAAc,OAAO,YAAY,KAAK;AACzD,QAAI,WAAW,CAAC,CAAC;AACjB,QAAI,OAAO,iBAAiB,UAAU;AACpC,UAAI,iBAAiB,WAAW,iBAAiB,OAAO,iBAAiB;AAAI,mBAAW;WACnF;AACH,YAAI;AACF,qBAAW,CAAC,CAAC,IAAI,SAAS,YAAY,YAAY,EAAC;QACrD,SAAS,GAAG;AACV,qBAAW;QACb;MACF;IACF;AAEA,SAAK,YAAY;AACjB,QAAI,YAAY,KAAK,gBAAgB,SAAS,GAAG;AAC/C,WAAK,gBAAgB,QAAQ,aAAU;AACrC,cAAM,QAAQ,QAAQ,UAAU,IAAI;AACpC,YAAI,MAAM;AAAO,gBAAM,MAAM,UAAU;AACvC,aAAK,YAAY,KAAK;AACtB,aAAK,UAAU,OAAO,KAAK,SAAS;MACtC,CAAC;IACH;EACF;;AAtCA,WAAA;EADC;;;;;AAjBU,YAAS,WAAA;MADrB,wBAAc,EAAE,MAAM,eAAe,SAAS,OAAM,CAAE;;GAC1C,SAAS;",
   "names": ["SwcIfForm"]
 }

package/dist/cjs/is/SwcIfHeading.js

@@ -76,9 +76,9 @@ let SwcIfHeading = class SwcIfHeading2 extends import_SwcHTMLHeadingElementBase.
     if (isTruthy && this._masterTplNodes.length > 0) {
       this._masterTplNodes.forEach((tplNode) => {
         const clone = tplNode.cloneNode(true);
-        this.appendChild(clone);
         if (clone.style)
           clone.style.display = "contents";
+        this.appendChild(clone);
         this.applyData(clone, this._swcValue);
       });
     }

package/dist/cjs/is/SwcIfHeading.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/is/SwcIfHeading.ts"],
-  "sourcesContent": ["import { elementDefine, innerHtml } from '../index';\nimport { SwcHTMLHeadingElementBase } from './SwcHTMLHeadingElementBase';\n\n@elementDefine({ name: 'swc-if-h1', extends: 'h1' })\nexport class SwcIfHeading extends SwcHTMLHeadingElementBase {\n  private _swcValue: any = false;\n\n  constructor() {\n    super();\n  }\n\n  set swcValue(val: any) {\n    this._swcValue = val;\n    if (this._masterTplNodes.length === 0) this.initCore();\n    this.render();\n  }\n\n  get swcValue(): any {\n    return this._swcValue;\n  }\n\n  @innerHtml\n  renderTemplate() {\n    return `<slot id=\"tpl-slot\" style=\"display:none;\"></slot>`;\n  }\n\n  connectedCallback() {\n    this.initCore();\n    if (this._masterTplNodes.length > 0) {\n      this.innerHTML = '';\n      this.render();\n    }\n  }\n\n  private render() {\n    const attrValue = this.getAttribute('swc-value') || this.getAttribute('value');\n    if (attrValue !== null && attrValue.includes('{{')) return;\n\n    let displayValue = attrValue !== null ? attrValue : this._swcValue;\n    let isTruthy = !!displayValue;\n    if (typeof displayValue === 'string') {\n      if (displayValue === 'false' || displayValue === '0' || displayValue === '') isTruthy = false;\n      else {\n        try {\n          isTruthy = !!new Function('return ' + displayValue)();\n        } catch (e) {\n          isTruthy = true;\n        }\n      }\n    }\n\n    this.innerHTML = '';\n    if (isTruthy && this._masterTplNodes.length > 0) {\n      this._masterTplNodes.forEach(tplNode => {\n        const clone = tplNode.cloneNode(true) as HTMLElement;\n        this.appendChild(clone);\n        // If it's a Customized Built-in, it might have hidden itself in connectedCallback\n        if (clone.style) clone.style.display = 'contents';\n        this.applyData(clone, this._swcValue);\n      });\n    }\n  }\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;AAAA,eAAyC;AACzC,uCAA0C;;;;;;;;;;AAGnC,IAAM,eAAN,MAAMA,sBAAqB,2DAAyB;EAGzD,cAAA;AACE,UAAK;AAHC,SAAA,YAAiB;EAIzB;EAEA,IAAI,SAAS,KAAQ;AACnB,SAAK,YAAY;AACjB,QAAI,KAAK,gBAAgB,WAAW;AAAG,WAAK,SAAQ;AACpD,SAAK,OAAM;EACb;EAEA,IAAI,WAAQ;AACV,WAAO,KAAK;EACd;EAGA,iBAAc;AACZ,WAAO;EACT;EAEA,oBAAiB;AACf,SAAK,SAAQ;AACb,QAAI,KAAK,gBAAgB,SAAS,GAAG;AACnC,WAAK,YAAY;AACjB,WAAK,OAAM;IACb;EACF;EAEQ,SAAM;AACZ,UAAM,YAAY,KAAK,aAAa,WAAW,KAAK,KAAK,aAAa,OAAO;AAC7E,QAAI,cAAc,QAAQ,UAAU,SAAS,IAAI;AAAG;AAEpD,QAAI,eAAe,cAAc,OAAO,YAAY,KAAK;AACzD,QAAI,WAAW,CAAC,CAAC;AACjB,QAAI,OAAO,iBAAiB,UAAU;AACpC,UAAI,iBAAiB,WAAW,iBAAiB,OAAO,iBAAiB;AAAI,mBAAW;WACnF;AACH,YAAI;AACF,qBAAW,CAAC,CAAC,IAAI,SAAS,YAAY,YAAY,EAAC;QACrD,SAAS,GAAG;AACV,qBAAW;QACb;MACF;IACF;AAEA,SAAK,YAAY;AACjB,QAAI,YAAY,KAAK,gBAAgB,SAAS,GAAG;AAC/C,WAAK,gBAAgB,QAAQ,aAAU;AACrC,cAAM,QAAQ,QAAQ,UAAU,IAAI;AACpC,aAAK,YAAY,KAAK;AAEtB,YAAI,MAAM;AAAO,gBAAM,MAAM,UAAU;AACvC,aAAK,UAAU,OAAO,KAAK,SAAS;MACtC,CAAC;IACH;EACF;;AAvCA,WAAA;EADC;;;;;AAjBU,eAAY,WAAA;MADxB,wBAAc,EAAE,MAAM,aAAa,SAAS,KAAI,CAAE;;GACtC,YAAY;",
+  "sourcesContent": ["import { elementDefine, innerHtml } from '../index';\nimport { SwcHTMLHeadingElementBase } from './SwcHTMLHeadingElementBase';\n\n@elementDefine({ name: 'swc-if-h1', extends: 'h1' })\nexport class SwcIfHeading extends SwcHTMLHeadingElementBase {\n  private _swcValue: any = false;\n\n  constructor() {\n    super();\n  }\n\n  set swcValue(val: any) {\n    this._swcValue = val;\n    if (this._masterTplNodes.length === 0) this.initCore();\n    this.render();\n  }\n\n  get swcValue(): any {\n    return this._swcValue;\n  }\n\n  @innerHtml\n  renderTemplate() {\n    return `<slot id=\"tpl-slot\" style=\"display:none;\"></slot>`;\n  }\n\n  connectedCallback() {\n    this.initCore();\n    if (this._masterTplNodes.length > 0) {\n      this.innerHTML = '';\n      this.render();\n    }\n  }\n\n  private render() {\n    const attrValue = this.getAttribute('swc-value') || this.getAttribute('value');\n    if (attrValue !== null && attrValue.includes('{{')) return;\n\n    let displayValue = attrValue !== null ? attrValue : this._swcValue;\n    let isTruthy = !!displayValue;\n    if (typeof displayValue === 'string') {\n      if (displayValue === 'false' || displayValue === '0' || displayValue === '') isTruthy = false;\n      else {\n        try {\n          isTruthy = !!new Function('return ' + displayValue)();\n        } catch (e) {\n          isTruthy = true;\n        }\n      }\n    }\n\n    this.innerHTML = '';\n    if (isTruthy && this._masterTplNodes.length > 0) {\n      this._masterTplNodes.forEach(tplNode => {\n        const clone = tplNode.cloneNode(true) as HTMLElement;\n        if (clone.style) clone.style.display = 'contents';\n        this.appendChild(clone);\n        this.applyData(clone, this._swcValue);\n      });\n    }\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;AAAA,eAAyC;AACzC,uCAA0C;;;;;;;;;;AAGnC,IAAM,eAAN,MAAMA,sBAAqB,2DAAyB;EAGzD,cAAA;AACE,UAAK;AAHC,SAAA,YAAiB;EAIzB;EAEA,IAAI,SAAS,KAAQ;AACnB,SAAK,YAAY;AACjB,QAAI,KAAK,gBAAgB,WAAW;AAAG,WAAK,SAAQ;AACpD,SAAK,OAAM;EACb;EAEA,IAAI,WAAQ;AACV,WAAO,KAAK;EACd;EAGA,iBAAc;AACZ,WAAO;EACT;EAEA,oBAAiB;AACf,SAAK,SAAQ;AACb,QAAI,KAAK,gBAAgB,SAAS,GAAG;AACnC,WAAK,YAAY;AACjB,WAAK,OAAM;IACb;EACF;EAEQ,SAAM;AACZ,UAAM,YAAY,KAAK,aAAa,WAAW,KAAK,KAAK,aAAa,OAAO;AAC7E,QAAI,cAAc,QAAQ,UAAU,SAAS,IAAI;AAAG;AAEpD,QAAI,eAAe,cAAc,OAAO,YAAY,KAAK;AACzD,QAAI,WAAW,CAAC,CAAC;AACjB,QAAI,OAAO,iBAAiB,UAAU;AACpC,UAAI,iBAAiB,WAAW,iBAAiB,OAAO,iBAAiB;AAAI,mBAAW;WACnF;AACH,YAAI;AACF,qBAAW,CAAC,CAAC,IAAI,SAAS,YAAY,YAAY,EAAC;QACrD,SAAS,GAAG;AACV,qBAAW;QACb;MACF;IACF;AAEA,SAAK,YAAY;AACjB,QAAI,YAAY,KAAK,gBAAgB,SAAS,GAAG;AAC/C,WAAK,gBAAgB,QAAQ,aAAU;AACrC,cAAM,QAAQ,QAAQ,UAAU,IAAI;AACpC,YAAI,MAAM;AAAO,gBAAM,MAAM,UAAU;AACvC,aAAK,YAAY,KAAK;AACtB,aAAK,UAAU,OAAO,KAAK,SAAS;MACtC,CAAC;IACH;EACF;;AAtCA,WAAA;EADC;;;;;AAjBU,eAAY,WAAA;MADxB,wBAAc,EAAE,MAAM,aAAa,SAAS,KAAI,CAAE;;GACtC,YAAY;",
   "names": ["SwcIfHeading"]
 }

package/dist/cjs/is/SwcIfHr.js

@@ -76,9 +76,9 @@ let SwcIfHr = class SwcIfHr2 extends import_SwcHTMLHRElementBase.SwcHTMLHRElemen
     if (isTruthy && this._masterTplNodes.length > 0) {
       this._masterTplNodes.forEach((tplNode) => {
         const clone = tplNode.cloneNode(true);
-        this.appendChild(clone);
         if (clone.style)
           clone.style.display = "contents";
+        this.appendChild(clone);
         this.applyData(clone, this._swcValue);
       });
     }

package/dist/cjs/is/SwcIfHr.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/is/SwcIfHr.ts"],
-  "sourcesContent": ["import { elementDefine, innerHtml } from '../index';\nimport { SwcHTMLHRElementBase } from './SwcHTMLHRElementBase';\n\n@elementDefine({ name: 'swc-if-hr', extends: 'hr' })\nexport class SwcIfHr extends SwcHTMLHRElementBase {\n  private _swcValue: any = false;\n\n  constructor() {\n    super();\n  }\n\n  set swcValue(val: any) {\n    this._swcValue = val;\n    if (this._masterTplNodes.length === 0) this.initCore();\n    this.render();\n  }\n\n  get swcValue(): any {\n    return this._swcValue;\n  }\n\n  @innerHtml\n  renderTemplate() {\n    return `<slot id=\"tpl-slot\" style=\"display:none;\"></slot>`;\n  }\n\n  connectedCallback() {\n    this.initCore();\n    if (this._masterTplNodes.length > 0) {\n      this.innerHTML = '';\n      this.render();\n    }\n  }\n\n  private render() {\n    const attrValue = this.getAttribute('swc-value') || this.getAttribute('value');\n    if (attrValue !== null && attrValue.includes('{{')) return;\n\n    let displayValue = attrValue !== null ? attrValue : this._swcValue;\n    let isTruthy = !!displayValue;\n    if (typeof displayValue === 'string') {\n      if (displayValue === 'false' || displayValue === '0' || displayValue === '') isTruthy = false;\n      else {\n        try {\n          isTruthy = !!new Function('return ' + displayValue)();\n        } catch (e) {\n          isTruthy = true;\n        }\n      }\n    }\n\n    this.innerHTML = '';\n    if (isTruthy && this._masterTplNodes.length > 0) {\n      this._masterTplNodes.forEach(tplNode => {\n        const clone = tplNode.cloneNode(true) as HTMLElement;\n        this.appendChild(clone);\n        // If it's a Customized Built-in, it might have hidden itself in connectedCallback\n        if (clone.style) clone.style.display = 'contents';\n        this.applyData(clone, this._swcValue);\n      });\n    }\n  }\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;AAAA,eAAyC;AACzC,kCAAqC;;;;;;;;;;AAG9B,IAAM,UAAN,MAAMA,iBAAgB,iDAAoB;EAG/C,cAAA;AACE,UAAK;AAHC,SAAA,YAAiB;EAIzB;EAEA,IAAI,SAAS,KAAQ;AACnB,SAAK,YAAY;AACjB,QAAI,KAAK,gBAAgB,WAAW;AAAG,WAAK,SAAQ;AACpD,SAAK,OAAM;EACb;EAEA,IAAI,WAAQ;AACV,WAAO,KAAK;EACd;EAGA,iBAAc;AACZ,WAAO;EACT;EAEA,oBAAiB;AACf,SAAK,SAAQ;AACb,QAAI,KAAK,gBAAgB,SAAS,GAAG;AACnC,WAAK,YAAY;AACjB,WAAK,OAAM;IACb;EACF;EAEQ,SAAM;AACZ,UAAM,YAAY,KAAK,aAAa,WAAW,KAAK,KAAK,aAAa,OAAO;AAC7E,QAAI,cAAc,QAAQ,UAAU,SAAS,IAAI;AAAG;AAEpD,QAAI,eAAe,cAAc,OAAO,YAAY,KAAK;AACzD,QAAI,WAAW,CAAC,CAAC;AACjB,QAAI,OAAO,iBAAiB,UAAU;AACpC,UAAI,iBAAiB,WAAW,iBAAiB,OAAO,iBAAiB;AAAI,mBAAW;WACnF;AACH,YAAI;AACF,qBAAW,CAAC,CAAC,IAAI,SAAS,YAAY,YAAY,EAAC;QACrD,SAAS,GAAG;AACV,qBAAW;QACb;MACF;IACF;AAEA,SAAK,YAAY;AACjB,QAAI,YAAY,KAAK,gBAAgB,SAAS,GAAG;AAC/C,WAAK,gBAAgB,QAAQ,aAAU;AACrC,cAAM,QAAQ,QAAQ,UAAU,IAAI;AACpC,aAAK,YAAY,KAAK;AAEtB,YAAI,MAAM;AAAO,gBAAM,MAAM,UAAU;AACvC,aAAK,UAAU,OAAO,KAAK,SAAS;MACtC,CAAC;IACH;EACF;;AAvCA,WAAA;EADC;;;;;AAjBU,UAAO,WAAA;MADnB,wBAAc,EAAE,MAAM,aAAa,SAAS,KAAI,CAAE;;GACtC,OAAO;",
+  "sourcesContent": ["import { elementDefine, innerHtml } from '../index';\nimport { SwcHTMLHRElementBase } from './SwcHTMLHRElementBase';\n\n@elementDefine({ name: 'swc-if-hr', extends: 'hr' })\nexport class SwcIfHr extends SwcHTMLHRElementBase {\n  private _swcValue: any = false;\n\n  constructor() {\n    super();\n  }\n\n  set swcValue(val: any) {\n    this._swcValue = val;\n    if (this._masterTplNodes.length === 0) this.initCore();\n    this.render();\n  }\n\n  get swcValue(): any {\n    return this._swcValue;\n  }\n\n  @innerHtml\n  renderTemplate() {\n    return `<slot id=\"tpl-slot\" style=\"display:none;\"></slot>`;\n  }\n\n  connectedCallback() {\n    this.initCore();\n    if (this._masterTplNodes.length > 0) {\n      this.innerHTML = '';\n      this.render();\n    }\n  }\n\n  private render() {\n    const attrValue = this.getAttribute('swc-value') || this.getAttribute('value');\n    if (attrValue !== null && attrValue.includes('{{')) return;\n\n    let displayValue = attrValue !== null ? attrValue : this._swcValue;\n    let isTruthy = !!displayValue;\n    if (typeof displayValue === 'string') {\n      if (displayValue === 'false' || displayValue === '0' || displayValue === '') isTruthy = false;\n      else {\n        try {\n          isTruthy = !!new Function('return ' + displayValue)();\n        } catch (e) {\n          isTruthy = true;\n        }\n      }\n    }\n\n    this.innerHTML = '';\n    if (isTruthy && this._masterTplNodes.length > 0) {\n      this._masterTplNodes.forEach(tplNode => {\n        const clone = tplNode.cloneNode(true) as HTMLElement;\n        if (clone.style) clone.style.display = 'contents';\n        this.appendChild(clone);\n        this.applyData(clone, this._swcValue);\n      });\n    }\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;AAAA,eAAyC;AACzC,kCAAqC;;;;;;;;;;AAG9B,IAAM,UAAN,MAAMA,iBAAgB,iDAAoB;EAG/C,cAAA;AACE,UAAK;AAHC,SAAA,YAAiB;EAIzB;EAEA,IAAI,SAAS,KAAQ;AACnB,SAAK,YAAY;AACjB,QAAI,KAAK,gBAAgB,WAAW;AAAG,WAAK,SAAQ;AACpD,SAAK,OAAM;EACb;EAEA,IAAI,WAAQ;AACV,WAAO,KAAK;EACd;EAGA,iBAAc;AACZ,WAAO;EACT;EAEA,oBAAiB;AACf,SAAK,SAAQ;AACb,QAAI,KAAK,gBAAgB,SAAS,GAAG;AACnC,WAAK,YAAY;AACjB,WAAK,OAAM;IACb;EACF;EAEQ,SAAM;AACZ,UAAM,YAAY,KAAK,aAAa,WAAW,KAAK,KAAK,aAAa,OAAO;AAC7E,QAAI,cAAc,QAAQ,UAAU,SAAS,IAAI;AAAG;AAEpD,QAAI,eAAe,cAAc,OAAO,YAAY,KAAK;AACzD,QAAI,WAAW,CAAC,CAAC;AACjB,QAAI,OAAO,iBAAiB,UAAU;AACpC,UAAI,iBAAiB,WAAW,iBAAiB,OAAO,iBAAiB;AAAI,mBAAW;WACnF;AACH,YAAI;AACF,qBAAW,CAAC,CAAC,IAAI,SAAS,YAAY,YAAY,EAAC;QACrD,SAAS,GAAG;AACV,qBAAW;QACb;MACF;IACF;AAEA,SAAK,YAAY;AACjB,QAAI,YAAY,KAAK,gBAAgB,SAAS,GAAG;AAC/C,WAAK,gBAAgB,QAAQ,aAAU;AACrC,cAAM,QAAQ,QAAQ,UAAU,IAAI;AACpC,YAAI,MAAM;AAAO,gBAAM,MAAM,UAAU;AACvC,aAAK,YAAY,KAAK;AACtB,aAAK,UAAU,OAAO,KAAK,SAAS;MACtC,CAAC;IACH;EACF;;AAtCA,WAAA;EADC;;;;;AAjBU,UAAO,WAAA;MADnB,wBAAc,EAAE,MAAM,aAAa,SAAS,KAAI,CAAE;;GACtC,OAAO;",
   "names": ["SwcIfHr"]
 }

package/dist/cjs/is/SwcIfIFrame.js

@@ -76,9 +76,9 @@ let SwcIfIFrame = class SwcIfIFrame2 extends import_SwcHTMLIFrameElementBase.Swc
     if (isTruthy && this._masterTplNodes.length > 0) {
       this._masterTplNodes.forEach((tplNode) => {
         const clone = tplNode.cloneNode(true);
-        this.appendChild(clone);
         if (clone.style)
           clone.style.display = "contents";
+        this.appendChild(clone);
         this.applyData(clone, this._swcValue);
       });
     }

package/dist/cjs/is/SwcIfIFrame.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/is/SwcIfIFrame.ts"],
-  "sourcesContent": ["import { elementDefine, innerHtml } from '../index';\nimport { SwcHTMLIFrameElementBase } from './SwcHTMLIFrameElementBase';\n\n@elementDefine({ name: 'swc-if-iframe', extends: 'iframe' })\nexport class SwcIfIFrame extends SwcHTMLIFrameElementBase {\n  private _swcValue: any = false;\n\n  constructor() {\n    super();\n  }\n\n  set swcValue(val: any) {\n    this._swcValue = val;\n    if (this._masterTplNodes.length === 0) this.initCore();\n    this.render();\n  }\n\n  get swcValue(): any {\n    return this._swcValue;\n  }\n\n  @innerHtml\n  renderTemplate() {\n    return `<slot id=\"tpl-slot\" style=\"display:none;\"></slot>`;\n  }\n\n  connectedCallback() {\n    this.initCore();\n    if (this._masterTplNodes.length > 0) {\n      this.innerHTML = '';\n      this.render();\n    }\n  }\n\n  private render() {\n    const attrValue = this.getAttribute('swc-value') || this.getAttribute('value');\n    if (attrValue !== null && attrValue.includes('{{')) return;\n\n    let displayValue = attrValue !== null ? attrValue : this._swcValue;\n    let isTruthy = !!displayValue;\n    if (typeof displayValue === 'string') {\n      if (displayValue === 'false' || displayValue === '0' || displayValue === '') isTruthy = false;\n      else {\n        try {\n          isTruthy = !!new Function('return ' + displayValue)();\n        } catch (e) {\n          isTruthy = true;\n        }\n      }\n    }\n\n    this.innerHTML = '';\n    if (isTruthy && this._masterTplNodes.length > 0) {\n      this._masterTplNodes.forEach(tplNode => {\n        const clone = tplNode.cloneNode(true) as HTMLElement;\n        this.appendChild(clone);\n        // If it's a Customized Built-in, it might have hidden itself in connectedCallback\n        if (clone.style) clone.style.display = 'contents';\n        this.applyData(clone, this._swcValue);\n      });\n    }\n  }\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;AAAA,eAAyC;AACzC,sCAAyC;;;;;;;;;;AAGlC,IAAM,cAAN,MAAMA,qBAAoB,yDAAwB;EAGvD,cAAA;AACE,UAAK;AAHC,SAAA,YAAiB;EAIzB;EAEA,IAAI,SAAS,KAAQ;AACnB,SAAK,YAAY;AACjB,QAAI,KAAK,gBAAgB,WAAW;AAAG,WAAK,SAAQ;AACpD,SAAK,OAAM;EACb;EAEA,IAAI,WAAQ;AACV,WAAO,KAAK;EACd;EAGA,iBAAc;AACZ,WAAO;EACT;EAEA,oBAAiB;AACf,SAAK,SAAQ;AACb,QAAI,KAAK,gBAAgB,SAAS,GAAG;AACnC,WAAK,YAAY;AACjB,WAAK,OAAM;IACb;EACF;EAEQ,SAAM;AACZ,UAAM,YAAY,KAAK,aAAa,WAAW,KAAK,KAAK,aAAa,OAAO;AAC7E,QAAI,cAAc,QAAQ,UAAU,SAAS,IAAI;AAAG;AAEpD,QAAI,eAAe,cAAc,OAAO,YAAY,KAAK;AACzD,QAAI,WAAW,CAAC,CAAC;AACjB,QAAI,OAAO,iBAAiB,UAAU;AACpC,UAAI,iBAAiB,WAAW,iBAAiB,OAAO,iBAAiB;AAAI,mBAAW;WACnF;AACH,YAAI;AACF,qBAAW,CAAC,CAAC,IAAI,SAAS,YAAY,YAAY,EAAC;QACrD,SAAS,GAAG;AACV,qBAAW;QACb;MACF;IACF;AAEA,SAAK,YAAY;AACjB,QAAI,YAAY,KAAK,gBAAgB,SAAS,GAAG;AAC/C,WAAK,gBAAgB,QAAQ,aAAU;AACrC,cAAM,QAAQ,QAAQ,UAAU,IAAI;AACpC,aAAK,YAAY,KAAK;AAEtB,YAAI,MAAM;AAAO,gBAAM,MAAM,UAAU;AACvC,aAAK,UAAU,OAAO,KAAK,SAAS;MACtC,CAAC;IACH;EACF;;AAvCA,WAAA;EADC;;;;;AAjBU,cAAW,WAAA;MADvB,wBAAc,EAAE,MAAM,iBAAiB,SAAS,SAAQ,CAAE;;GAC9C,WAAW;",
+  "sourcesContent": ["import { elementDefine, innerHtml } from '../index';\nimport { SwcHTMLIFrameElementBase } from './SwcHTMLIFrameElementBase';\n\n@elementDefine({ name: 'swc-if-iframe', extends: 'iframe' })\nexport class SwcIfIFrame extends SwcHTMLIFrameElementBase {\n  private _swcValue: any = false;\n\n  constructor() {\n    super();\n  }\n\n  set swcValue(val: any) {\n    this._swcValue = val;\n    if (this._masterTplNodes.length === 0) this.initCore();\n    this.render();\n  }\n\n  get swcValue(): any {\n    return this._swcValue;\n  }\n\n  @innerHtml\n  renderTemplate() {\n    return `<slot id=\"tpl-slot\" style=\"display:none;\"></slot>`;\n  }\n\n  connectedCallback() {\n    this.initCore();\n    if (this._masterTplNodes.length > 0) {\n      this.innerHTML = '';\n      this.render();\n    }\n  }\n\n  private render() {\n    const attrValue = this.getAttribute('swc-value') || this.getAttribute('value');\n    if (attrValue !== null && attrValue.includes('{{')) return;\n\n    let displayValue = attrValue !== null ? attrValue : this._swcValue;\n    let isTruthy = !!displayValue;\n    if (typeof displayValue === 'string') {\n      if (displayValue === 'false' || displayValue === '0' || displayValue === '') isTruthy = false;\n      else {\n        try {\n          isTruthy = !!new Function('return ' + displayValue)();\n        } catch (e) {\n          isTruthy = true;\n        }\n      }\n    }\n\n    this.innerHTML = '';\n    if (isTruthy && this._masterTplNodes.length > 0) {\n      this._masterTplNodes.forEach(tplNode => {\n        const clone = tplNode.cloneNode(true) as HTMLElement;\n        if (clone.style) clone.style.display = 'contents';\n        this.appendChild(clone);\n        this.applyData(clone, this._swcValue);\n      });\n    }\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;AAAA,eAAyC;AACzC,sCAAyC;;;;;;;;;;AAGlC,IAAM,cAAN,MAAMA,qBAAoB,yDAAwB;EAGvD,cAAA;AACE,UAAK;AAHC,SAAA,YAAiB;EAIzB;EAEA,IAAI,SAAS,KAAQ;AACnB,SAAK,YAAY;AACjB,QAAI,KAAK,gBAAgB,WAAW;AAAG,WAAK,SAAQ;AACpD,SAAK,OAAM;EACb;EAEA,IAAI,WAAQ;AACV,WAAO,KAAK;EACd;EAGA,iBAAc;AACZ,WAAO;EACT;EAEA,oBAAiB;AACf,SAAK,SAAQ;AACb,QAAI,KAAK,gBAAgB,SAAS,GAAG;AACnC,WAAK,YAAY;AACjB,WAAK,OAAM;IACb;EACF;EAEQ,SAAM;AACZ,UAAM,YAAY,KAAK,aAAa,WAAW,KAAK,KAAK,aAAa,OAAO;AAC7E,QAAI,cAAc,QAAQ,UAAU,SAAS,IAAI;AAAG;AAEpD,QAAI,eAAe,cAAc,OAAO,YAAY,KAAK;AACzD,QAAI,WAAW,CAAC,CAAC;AACjB,QAAI,OAAO,iBAAiB,UAAU;AACpC,UAAI,iBAAiB,WAAW,iBAAiB,OAAO,iBAAiB;AAAI,mBAAW;WACnF;AACH,YAAI;AACF,qBAAW,CAAC,CAAC,IAAI,SAAS,YAAY,YAAY,EAAC;QACrD,SAAS,GAAG;AACV,qBAAW;QACb;MACF;IACF;AAEA,SAAK,YAAY;AACjB,QAAI,YAAY,KAAK,gBAAgB,SAAS,GAAG;AAC/C,WAAK,gBAAgB,QAAQ,aAAU;AACrC,cAAM,QAAQ,QAAQ,UAAU,IAAI;AACpC,YAAI,MAAM;AAAO,gBAAM,MAAM,UAAU;AACvC,aAAK,YAAY,KAAK;AACtB,aAAK,UAAU,OAAO,KAAK,SAAS;MACtC,CAAC;IACH;EACF;;AAtCA,WAAA;EADC;;;;;AAjBU,cAAW,WAAA;MADvB,wBAAc,EAAE,MAAM,iBAAiB,SAAS,SAAQ,CAAE;;GAC9C,WAAW;",
   "names": ["SwcIfIFrame"]
 }

package/dist/cjs/is/SwcIfImage.js

@@ -76,9 +76,9 @@ let SwcIfImage = class SwcIfImage2 extends import_SwcHTMLImageElementBase.SwcHTM
     if (isTruthy && this._masterTplNodes.length > 0) {
       this._masterTplNodes.forEach((tplNode) => {
         const clone = tplNode.cloneNode(true);
-        this.appendChild(clone);
         if (clone.style)
           clone.style.display = "contents";
+        this.appendChild(clone);
         this.applyData(clone, this._swcValue);
       });
     }

package/dist/cjs/is/SwcIfImage.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/is/SwcIfImage.ts"],
-  "sourcesContent": ["import { elementDefine, innerHtml } from '../index';\nimport { SwcHTMLImageElementBase } from './SwcHTMLImageElementBase';\n\n@elementDefine({ name: 'swc-if-img', extends: 'img' })\nexport class SwcIfImage extends SwcHTMLImageElementBase {\n  private _swcValue: any = false;\n\n  constructor() {\n    super();\n  }\n\n  set swcValue(val: any) {\n    this._swcValue = val;\n    if (this._masterTplNodes.length === 0) this.initCore();\n    this.render();\n  }\n\n  get swcValue(): any {\n    return this._swcValue;\n  }\n\n  @innerHtml\n  renderTemplate() {\n    return `<slot id=\"tpl-slot\" style=\"display:none;\"></slot>`;\n  }\n\n  connectedCallback() {\n    this.initCore();\n    if (this._masterTplNodes.length > 0) {\n      this.innerHTML = '';\n      this.render();\n    }\n  }\n\n  private render() {\n    const attrValue = this.getAttribute('swc-value') || this.getAttribute('value');\n    if (attrValue !== null && attrValue.includes('{{')) return;\n\n    let displayValue = attrValue !== null ? attrValue : this._swcValue;\n    let isTruthy = !!displayValue;\n    if (typeof displayValue === 'string') {\n      if (displayValue === 'false' || displayValue === '0' || displayValue === '') isTruthy = false;\n      else {\n        try {\n          isTruthy = !!new Function('return ' + displayValue)();\n        } catch (e) {\n          isTruthy = true;\n        }\n      }\n    }\n\n    this.innerHTML = '';\n    if (isTruthy && this._masterTplNodes.length > 0) {\n      this._masterTplNodes.forEach(tplNode => {\n        const clone = tplNode.cloneNode(true) as HTMLElement;\n        this.appendChild(clone);\n        // If it's a Customized Built-in, it might have hidden itself in connectedCallback\n        if (clone.style) clone.style.display = 'contents';\n        this.applyData(clone, this._swcValue);\n      });\n    }\n  }\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;AAAA,eAAyC;AACzC,qCAAwC;;;;;;;;;;AAGjC,IAAM,aAAN,MAAMA,oBAAmB,uDAAuB;EAGrD,cAAA;AACE,UAAK;AAHC,SAAA,YAAiB;EAIzB;EAEA,IAAI,SAAS,KAAQ;AACnB,SAAK,YAAY;AACjB,QAAI,KAAK,gBAAgB,WAAW;AAAG,WAAK,SAAQ;AACpD,SAAK,OAAM;EACb;EAEA,IAAI,WAAQ;AACV,WAAO,KAAK;EACd;EAGA,iBAAc;AACZ,WAAO;EACT;EAEA,oBAAiB;AACf,SAAK,SAAQ;AACb,QAAI,KAAK,gBAAgB,SAAS,GAAG;AACnC,WAAK,YAAY;AACjB,WAAK,OAAM;IACb;EACF;EAEQ,SAAM;AACZ,UAAM,YAAY,KAAK,aAAa,WAAW,KAAK,KAAK,aAAa,OAAO;AAC7E,QAAI,cAAc,QAAQ,UAAU,SAAS,IAAI;AAAG;AAEpD,QAAI,eAAe,cAAc,OAAO,YAAY,KAAK;AACzD,QAAI,WAAW,CAAC,CAAC;AACjB,QAAI,OAAO,iBAAiB,UAAU;AACpC,UAAI,iBAAiB,WAAW,iBAAiB,OAAO,iBAAiB;AAAI,mBAAW;WACnF;AACH,YAAI;AACF,qBAAW,CAAC,CAAC,IAAI,SAAS,YAAY,YAAY,EAAC;QACrD,SAAS,GAAG;AACV,qBAAW;QACb;MACF;IACF;AAEA,SAAK,YAAY;AACjB,QAAI,YAAY,KAAK,gBAAgB,SAAS,GAAG;AAC/C,WAAK,gBAAgB,QAAQ,aAAU;AACrC,cAAM,QAAQ,QAAQ,UAAU,IAAI;AACpC,aAAK,YAAY,KAAK;AAEtB,YAAI,MAAM;AAAO,gBAAM,MAAM,UAAU;AACvC,aAAK,UAAU,OAAO,KAAK,SAAS;MACtC,CAAC;IACH;EACF;;AAvCA,WAAA;EADC;;;;;AAjBU,aAAU,WAAA;MADtB,wBAAc,EAAE,MAAM,cAAc,SAAS,MAAK,CAAE;;GACxC,UAAU;",
+  "sourcesContent": ["import { elementDefine, innerHtml } from '../index';\nimport { SwcHTMLImageElementBase } from './SwcHTMLImageElementBase';\n\n@elementDefine({ name: 'swc-if-img', extends: 'img' })\nexport class SwcIfImage extends SwcHTMLImageElementBase {\n  private _swcValue: any = false;\n\n  constructor() {\n    super();\n  }\n\n  set swcValue(val: any) {\n    this._swcValue = val;\n    if (this._masterTplNodes.length === 0) this.initCore();\n    this.render();\n  }\n\n  get swcValue(): any {\n    return this._swcValue;\n  }\n\n  @innerHtml\n  renderTemplate() {\n    return `<slot id=\"tpl-slot\" style=\"display:none;\"></slot>`;\n  }\n\n  connectedCallback() {\n    this.initCore();\n    if (this._masterTplNodes.length > 0) {\n      this.innerHTML = '';\n      this.render();\n    }\n  }\n\n  private render() {\n    const attrValue = this.getAttribute('swc-value') || this.getAttribute('value');\n    if (attrValue !== null && attrValue.includes('{{')) return;\n\n    let displayValue = attrValue !== null ? attrValue : this._swcValue;\n    let isTruthy = !!displayValue;\n    if (typeof displayValue === 'string') {\n      if (displayValue === 'false' || displayValue === '0' || displayValue === '') isTruthy = false;\n      else {\n        try {\n          isTruthy = !!new Function('return ' + displayValue)();\n        } catch (e) {\n          isTruthy = true;\n        }\n      }\n    }\n\n    this.innerHTML = '';\n    if (isTruthy && this._masterTplNodes.length > 0) {\n      this._masterTplNodes.forEach(tplNode => {\n        const clone = tplNode.cloneNode(true) as HTMLElement;\n        if (clone.style) clone.style.display = 'contents';\n        this.appendChild(clone);\n        this.applyData(clone, this._swcValue);\n      });\n    }\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;AAAA,eAAyC;AACzC,qCAAwC;;;;;;;;;;AAGjC,IAAM,aAAN,MAAMA,oBAAmB,uDAAuB;EAGrD,cAAA;AACE,UAAK;AAHC,SAAA,YAAiB;EAIzB;EAEA,IAAI,SAAS,KAAQ;AACnB,SAAK,YAAY;AACjB,QAAI,KAAK,gBAAgB,WAAW;AAAG,WAAK,SAAQ;AACpD,SAAK,OAAM;EACb;EAEA,IAAI,WAAQ;AACV,WAAO,KAAK;EACd;EAGA,iBAAc;AACZ,WAAO;EACT;EAEA,oBAAiB;AACf,SAAK,SAAQ;AACb,QAAI,KAAK,gBAAgB,SAAS,GAAG;AACnC,WAAK,YAAY;AACjB,WAAK,OAAM;IACb;EACF;EAEQ,SAAM;AACZ,UAAM,YAAY,KAAK,aAAa,WAAW,KAAK,KAAK,aAAa,OAAO;AAC7E,QAAI,cAAc,QAAQ,UAAU,SAAS,IAAI;AAAG;AAEpD,QAAI,eAAe,cAAc,OAAO,YAAY,KAAK;AACzD,QAAI,WAAW,CAAC,CAAC;AACjB,QAAI,OAAO,iBAAiB,UAAU;AACpC,UAAI,iBAAiB,WAAW,iBAAiB,OAAO,iBAAiB;AAAI,mBAAW;WACnF;AACH,YAAI;AACF,qBAAW,CAAC,CAAC,IAAI,SAAS,YAAY,YAAY,EAAC;QACrD,SAAS,GAAG;AACV,qBAAW;QACb;MACF;IACF;AAEA,SAAK,YAAY;AACjB,QAAI,YAAY,KAAK,gBAAgB,SAAS,GAAG;AAC/C,WAAK,gBAAgB,QAAQ,aAAU;AACrC,cAAM,QAAQ,QAAQ,UAAU,IAAI;AACpC,YAAI,MAAM;AAAO,gBAAM,MAAM,UAAU;AACvC,aAAK,YAAY,KAAK;AACtB,aAAK,UAAU,OAAO,KAAK,SAAS;MACtC,CAAC;IACH;EACF;;AAtCA,WAAA;EADC;;;;;AAjBU,aAAU,WAAA;MADtB,wBAAc,EAAE,MAAM,cAAc,SAAS,MAAK,CAAE;;GACxC,UAAU;",
   "names": ["SwcIfImage"]
 }

package/dist/cjs/is/SwcIfInput.js

@@ -76,9 +76,9 @@ let SwcIfInput = class SwcIfInput2 extends import_SwcHTMLInputElementBase.SwcHTM
     if (isTruthy && this._masterTplNodes.length > 0) {
       this._masterTplNodes.forEach((tplNode) => {
         const clone = tplNode.cloneNode(true);
-        this.appendChild(clone);
         if (clone.style)
           clone.style.display = "contents";
+        this.appendChild(clone);
         this.applyData(clone, this._swcValue);
       });
     }

package/dist/cjs/is/SwcIfInput.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/is/SwcIfInput.ts"],
-  "sourcesContent": ["import { elementDefine, innerHtml } from '../index';\nimport { SwcHTMLInputElementBase } from './SwcHTMLInputElementBase';\n\n@elementDefine({ name: 'swc-if-input', extends: 'input' })\nexport class SwcIfInput extends SwcHTMLInputElementBase {\n  private _swcValue: any = false;\n\n  constructor() {\n    super();\n  }\n\n  set swcValue(val: any) {\n    this._swcValue = val;\n    if (this._masterTplNodes.length === 0) this.initCore();\n    this.render();\n  }\n\n  get swcValue(): any {\n    return this._swcValue;\n  }\n\n  @innerHtml\n  renderTemplate() {\n    return `<slot id=\"tpl-slot\" style=\"display:none;\"></slot>`;\n  }\n\n  connectedCallback() {\n    this.initCore();\n    if (this._masterTplNodes.length > 0) {\n      this.innerHTML = '';\n      this.render();\n    }\n  }\n\n  private render() {\n    const attrValue = this.getAttribute('swc-value') || this.getAttribute('value');\n    if (attrValue !== null && attrValue.includes('{{')) return;\n\n    let displayValue = attrValue !== null ? attrValue : this._swcValue;\n    let isTruthy = !!displayValue;\n    if (typeof displayValue === 'string') {\n      if (displayValue === 'false' || displayValue === '0' || displayValue === '') isTruthy = false;\n      else {\n        try {\n          isTruthy = !!new Function('return ' + displayValue)();\n        } catch (e) {\n          isTruthy = true;\n        }\n      }\n    }\n\n    this.innerHTML = '';\n    if (isTruthy && this._masterTplNodes.length > 0) {\n      this._masterTplNodes.forEach(tplNode => {\n        const clone = tplNode.cloneNode(true) as HTMLElement;\n        this.appendChild(clone);\n        // If it's a Customized Built-in, it might have hidden itself in connectedCallback\n        if (clone.style) clone.style.display = 'contents';\n        this.applyData(clone, this._swcValue);\n      });\n    }\n  }\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;AAAA,eAAyC;AACzC,qCAAwC;;;;;;;;;;AAGjC,IAAM,aAAN,MAAMA,oBAAmB,uDAAuB;EAGrD,cAAA;AACE,UAAK;AAHC,SAAA,YAAiB;EAIzB;EAEA,IAAI,SAAS,KAAQ;AACnB,SAAK,YAAY;AACjB,QAAI,KAAK,gBAAgB,WAAW;AAAG,WAAK,SAAQ;AACpD,SAAK,OAAM;EACb;EAEA,IAAI,WAAQ;AACV,WAAO,KAAK;EACd;EAGA,iBAAc;AACZ,WAAO;EACT;EAEA,oBAAiB;AACf,SAAK,SAAQ;AACb,QAAI,KAAK,gBAAgB,SAAS,GAAG;AACnC,WAAK,YAAY;AACjB,WAAK,OAAM;IACb;EACF;EAEQ,SAAM;AACZ,UAAM,YAAY,KAAK,aAAa,WAAW,KAAK,KAAK,aAAa,OAAO;AAC7E,QAAI,cAAc,QAAQ,UAAU,SAAS,IAAI;AAAG;AAEpD,QAAI,eAAe,cAAc,OAAO,YAAY,KAAK;AACzD,QAAI,WAAW,CAAC,CAAC;AACjB,QAAI,OAAO,iBAAiB,UAAU;AACpC,UAAI,iBAAiB,WAAW,iBAAiB,OAAO,iBAAiB;AAAI,mBAAW;WACnF;AACH,YAAI;AACF,qBAAW,CAAC,CAAC,IAAI,SAAS,YAAY,YAAY,EAAC;QACrD,SAAS,GAAG;AACV,qBAAW;QACb;MACF;IACF;AAEA,SAAK,YAAY;AACjB,QAAI,YAAY,KAAK,gBAAgB,SAAS,GAAG;AAC/C,WAAK,gBAAgB,QAAQ,aAAU;AACrC,cAAM,QAAQ,QAAQ,UAAU,IAAI;AACpC,aAAK,YAAY,KAAK;AAEtB,YAAI,MAAM;AAAO,gBAAM,MAAM,UAAU;AACvC,aAAK,UAAU,OAAO,KAAK,SAAS;MACtC,CAAC;IACH;EACF;;AAvCA,WAAA;EADC;;;;;AAjBU,aAAU,WAAA;MADtB,wBAAc,EAAE,MAAM,gBAAgB,SAAS,QAAO,CAAE;;GAC5C,UAAU;",
+  "sourcesContent": ["import { elementDefine, innerHtml } from '../index';\nimport { SwcHTMLInputElementBase } from './SwcHTMLInputElementBase';\n\n@elementDefine({ name: 'swc-if-input', extends: 'input' })\nexport class SwcIfInput extends SwcHTMLInputElementBase {\n  private _swcValue: any = false;\n\n  constructor() {\n    super();\n  }\n\n  set swcValue(val: any) {\n    this._swcValue = val;\n    if (this._masterTplNodes.length === 0) this.initCore();\n    this.render();\n  }\n\n  get swcValue(): any {\n    return this._swcValue;\n  }\n\n  @innerHtml\n  renderTemplate() {\n    return `<slot id=\"tpl-slot\" style=\"display:none;\"></slot>`;\n  }\n\n  connectedCallback() {\n    this.initCore();\n    if (this._masterTplNodes.length > 0) {\n      this.innerHTML = '';\n      this.render();\n    }\n  }\n\n  private render() {\n    const attrValue = this.getAttribute('swc-value') || this.getAttribute('value');\n    if (attrValue !== null && attrValue.includes('{{')) return;\n\n    let displayValue = attrValue !== null ? attrValue : this._swcValue;\n    let isTruthy = !!displayValue;\n    if (typeof displayValue === 'string') {\n      if (displayValue === 'false' || displayValue === '0' || displayValue === '') isTruthy = false;\n      else {\n        try {\n          isTruthy = !!new Function('return ' + displayValue)();\n        } catch (e) {\n          isTruthy = true;\n        }\n      }\n    }\n\n    this.innerHTML = '';\n    if (isTruthy && this._masterTplNodes.length > 0) {\n      this._masterTplNodes.forEach(tplNode => {\n        const clone = tplNode.cloneNode(true) as HTMLElement;\n        if (clone.style) clone.style.display = 'contents';\n        this.appendChild(clone);\n        this.applyData(clone, this._swcValue);\n      });\n    }\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;AAAA,eAAyC;AACzC,qCAAwC;;;;;;;;;;AAGjC,IAAM,aAAN,MAAMA,oBAAmB,uDAAuB;EAGrD,cAAA;AACE,UAAK;AAHC,SAAA,YAAiB;EAIzB;EAEA,IAAI,SAAS,KAAQ;AACnB,SAAK,YAAY;AACjB,QAAI,KAAK,gBAAgB,WAAW;AAAG,WAAK,SAAQ;AACpD,SAAK,OAAM;EACb;EAEA,IAAI,WAAQ;AACV,WAAO,KAAK;EACd;EAGA,iBAAc;AACZ,WAAO;EACT;EAEA,oBAAiB;AACf,SAAK,SAAQ;AACb,QAAI,KAAK,gBAAgB,SAAS,GAAG;AACnC,WAAK,YAAY;AACjB,WAAK,OAAM;IACb;EACF;EAEQ,SAAM;AACZ,UAAM,YAAY,KAAK,aAAa,WAAW,KAAK,KAAK,aAAa,OAAO;AAC7E,QAAI,cAAc,QAAQ,UAAU,SAAS,IAAI;AAAG;AAEpD,QAAI,eAAe,cAAc,OAAO,YAAY,KAAK;AACzD,QAAI,WAAW,CAAC,CAAC;AACjB,QAAI,OAAO,iBAAiB,UAAU;AACpC,UAAI,iBAAiB,WAAW,iBAAiB,OAAO,iBAAiB;AAAI,mBAAW;WACnF;AACH,YAAI;AACF,qBAAW,CAAC,CAAC,IAAI,SAAS,YAAY,YAAY,EAAC;QACrD,SAAS,GAAG;AACV,qBAAW;QACb;MACF;IACF;AAEA,SAAK,YAAY;AACjB,QAAI,YAAY,KAAK,gBAAgB,SAAS,GAAG;AAC/C,WAAK,gBAAgB,QAAQ,aAAU;AACrC,cAAM,QAAQ,QAAQ,UAAU,IAAI;AACpC,YAAI,MAAM;AAAO,gBAAM,MAAM,UAAU;AACvC,aAAK,YAAY,KAAK;AACtB,aAAK,UAAU,OAAO,KAAK,SAAS;MACtC,CAAC;IACH;EACF;;AAtCA,WAAA;EADC;;;;;AAjBU,aAAU,WAAA;MADtB,wBAAc,EAAE,MAAM,gBAAgB,SAAS,QAAO,CAAE;;GAC5C,UAAU;",
   "names": ["SwcIfInput"]
 }

package/dist/cjs/is/SwcIfLabel.js

@@ -76,9 +76,9 @@ let SwcIfLabel = class SwcIfLabel2 extends import_SwcHTMLLabelElementBase.SwcHTM
     if (isTruthy && this._masterTplNodes.length > 0) {
       this._masterTplNodes.forEach((tplNode) => {
         const clone = tplNode.cloneNode(true);
-        this.appendChild(clone);
         if (clone.style)
           clone.style.display = "contents";
+        this.appendChild(clone);
         this.applyData(clone, this._swcValue);
       });
     }

package/dist/cjs/is/SwcIfLabel.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/is/SwcIfLabel.ts"],
-  "sourcesContent": ["import { elementDefine, innerHtml } from '../index';\nimport { SwcHTMLLabelElementBase } from './SwcHTMLLabelElementBase';\n\n@elementDefine({ name: 'swc-if-label', extends: 'label' })\nexport class SwcIfLabel extends SwcHTMLLabelElementBase {\n  private _swcValue: any = false;\n\n  constructor() {\n    super();\n  }\n\n  set swcValue(val: any) {\n    this._swcValue = val;\n    if (this._masterTplNodes.length === 0) this.initCore();\n    this.render();\n  }\n\n  get swcValue(): any {\n    return this._swcValue;\n  }\n\n  @innerHtml\n  renderTemplate() {\n    return `<slot id=\"tpl-slot\" style=\"display:none;\"></slot>`;\n  }\n\n  connectedCallback() {\n    this.initCore();\n    if (this._masterTplNodes.length > 0) {\n      this.innerHTML = '';\n      this.render();\n    }\n  }\n\n  private render() {\n    const attrValue = this.getAttribute('swc-value') || this.getAttribute('value');\n    if (attrValue !== null && attrValue.includes('{{')) return;\n\n    let displayValue = attrValue !== null ? attrValue : this._swcValue;\n    let isTruthy = !!displayValue;\n    if (typeof displayValue === 'string') {\n      if (displayValue === 'false' || displayValue === '0' || displayValue === '') isTruthy = false;\n      else {\n        try {\n          isTruthy = !!new Function('return ' + displayValue)();\n        } catch (e) {\n          isTruthy = true;\n        }\n      }\n    }\n\n    this.innerHTML = '';\n    if (isTruthy && this._masterTplNodes.length > 0) {\n      this._masterTplNodes.forEach(tplNode => {\n        const clone = tplNode.cloneNode(true) as HTMLElement;\n        this.appendChild(clone);\n        // If it's a Customized Built-in, it might have hidden itself in connectedCallback\n        if (clone.style) clone.style.display = 'contents';\n        this.applyData(clone, this._swcValue);\n      });\n    }\n  }\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;AAAA,eAAyC;AACzC,qCAAwC;;;;;;;;;;AAGjC,IAAM,aAAN,MAAMA,oBAAmB,uDAAuB;EAGrD,cAAA;AACE,UAAK;AAHC,SAAA,YAAiB;EAIzB;EAEA,IAAI,SAAS,KAAQ;AACnB,SAAK,YAAY;AACjB,QAAI,KAAK,gBAAgB,WAAW;AAAG,WAAK,SAAQ;AACpD,SAAK,OAAM;EACb;EAEA,IAAI,WAAQ;AACV,WAAO,KAAK;EACd;EAGA,iBAAc;AACZ,WAAO;EACT;EAEA,oBAAiB;AACf,SAAK,SAAQ;AACb,QAAI,KAAK,gBAAgB,SAAS,GAAG;AACnC,WAAK,YAAY;AACjB,WAAK,OAAM;IACb;EACF;EAEQ,SAAM;AACZ,UAAM,YAAY,KAAK,aAAa,WAAW,KAAK,KAAK,aAAa,OAAO;AAC7E,QAAI,cAAc,QAAQ,UAAU,SAAS,IAAI;AAAG;AAEpD,QAAI,eAAe,cAAc,OAAO,YAAY,KAAK;AACzD,QAAI,WAAW,CAAC,CAAC;AACjB,QAAI,OAAO,iBAAiB,UAAU;AACpC,UAAI,iBAAiB,WAAW,iBAAiB,OAAO,iBAAiB;AAAI,mBAAW;WACnF;AACH,YAAI;AACF,qBAAW,CAAC,CAAC,IAAI,SAAS,YAAY,YAAY,EAAC;QACrD,SAAS,GAAG;AACV,qBAAW;QACb;MACF;IACF;AAEA,SAAK,YAAY;AACjB,QAAI,YAAY,KAAK,gBAAgB,SAAS,GAAG;AAC/C,WAAK,gBAAgB,QAAQ,aAAU;AACrC,cAAM,QAAQ,QAAQ,UAAU,IAAI;AACpC,aAAK,YAAY,KAAK;AAEtB,YAAI,MAAM;AAAO,gBAAM,MAAM,UAAU;AACvC,aAAK,UAAU,OAAO,KAAK,SAAS;MACtC,CAAC;IACH;EACF;;AAvCA,WAAA;EADC;;;;;AAjBU,aAAU,WAAA;MADtB,wBAAc,EAAE,MAAM,gBAAgB,SAAS,QAAO,CAAE;;GAC5C,UAAU;",
+  "sourcesContent": ["import { elementDefine, innerHtml } from '../index';\nimport { SwcHTMLLabelElementBase } from './SwcHTMLLabelElementBase';\n\n@elementDefine({ name: 'swc-if-label', extends: 'label' })\nexport class SwcIfLabel extends SwcHTMLLabelElementBase {\n  private _swcValue: any = false;\n\n  constructor() {\n    super();\n  }\n\n  set swcValue(val: any) {\n    this._swcValue = val;\n    if (this._masterTplNodes.length === 0) this.initCore();\n    this.render();\n  }\n\n  get swcValue(): any {\n    return this._swcValue;\n  }\n\n  @innerHtml\n  renderTemplate() {\n    return `<slot id=\"tpl-slot\" style=\"display:none;\"></slot>`;\n  }\n\n  connectedCallback() {\n    this.initCore();\n    if (this._masterTplNodes.length > 0) {\n      this.innerHTML = '';\n      this.render();\n    }\n  }\n\n  private render() {\n    const attrValue = this.getAttribute('swc-value') || this.getAttribute('value');\n    if (attrValue !== null && attrValue.includes('{{')) return;\n\n    let displayValue = attrValue !== null ? attrValue : this._swcValue;\n    let isTruthy = !!displayValue;\n    if (typeof displayValue === 'string') {\n      if (displayValue === 'false' || displayValue === '0' || displayValue === '') isTruthy = false;\n      else {\n        try {\n          isTruthy = !!new Function('return ' + displayValue)();\n        } catch (e) {\n          isTruthy = true;\n        }\n      }\n    }\n\n    this.innerHTML = '';\n    if (isTruthy && this._masterTplNodes.length > 0) {\n      this._masterTplNodes.forEach(tplNode => {\n        const clone = tplNode.cloneNode(true) as HTMLElement;\n        if (clone.style) clone.style.display = 'contents';\n        this.appendChild(clone);\n        this.applyData(clone, this._swcValue);\n      });\n    }\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;AAAA,eAAyC;AACzC,qCAAwC;;;;;;;;;;AAGjC,IAAM,aAAN,MAAMA,oBAAmB,uDAAuB;EAGrD,cAAA;AACE,UAAK;AAHC,SAAA,YAAiB;EAIzB;EAEA,IAAI,SAAS,KAAQ;AACnB,SAAK,YAAY;AACjB,QAAI,KAAK,gBAAgB,WAAW;AAAG,WAAK,SAAQ;AACpD,SAAK,OAAM;EACb;EAEA,IAAI,WAAQ;AACV,WAAO,KAAK;EACd;EAGA,iBAAc;AACZ,WAAO;EACT;EAEA,oBAAiB;AACf,SAAK,SAAQ;AACb,QAAI,KAAK,gBAAgB,SAAS,GAAG;AACnC,WAAK,YAAY;AACjB,WAAK,OAAM;IACb;EACF;EAEQ,SAAM;AACZ,UAAM,YAAY,KAAK,aAAa,WAAW,KAAK,KAAK,aAAa,OAAO;AAC7E,QAAI,cAAc,QAAQ,UAAU,SAAS,IAAI;AAAG;AAEpD,QAAI,eAAe,cAAc,OAAO,YAAY,KAAK;AACzD,QAAI,WAAW,CAAC,CAAC;AACjB,QAAI,OAAO,iBAAiB,UAAU;AACpC,UAAI,iBAAiB,WAAW,iBAAiB,OAAO,iBAAiB;AAAI,mBAAW;WACnF;AACH,YAAI;AACF,qBAAW,CAAC,CAAC,IAAI,SAAS,YAAY,YAAY,EAAC;QACrD,SAAS,GAAG;AACV,qBAAW;QACb;MACF;IACF;AAEA,SAAK,YAAY;AACjB,QAAI,YAAY,KAAK,gBAAgB,SAAS,GAAG;AAC/C,WAAK,gBAAgB,QAAQ,aAAU;AACrC,cAAM,QAAQ,QAAQ,UAAU,IAAI;AACpC,YAAI,MAAM;AAAO,gBAAM,MAAM,UAAU;AACvC,aAAK,YAAY,KAAK;AACtB,aAAK,UAAU,OAAO,KAAK,SAAS;MACtC,CAAC;IACH;EACF;;AAtCA,WAAA;EADC;;;;;AAjBU,aAAU,WAAA;MADtB,wBAAc,EAAE,MAAM,gBAAgB,SAAS,QAAO,CAAE;;GAC5C,UAAU;",
   "names": ["SwcIfLabel"]
 }

package/dist/cjs/is/SwcIfLegend.js

@@ -76,9 +76,9 @@ let SwcIfLegend = class SwcIfLegend2 extends import_SwcHTMLLegendElementBase.Swc
     if (isTruthy && this._masterTplNodes.length > 0) {
       this._masterTplNodes.forEach((tplNode) => {
         const clone = tplNode.cloneNode(true);
-        this.appendChild(clone);
         if (clone.style)
           clone.style.display = "contents";
+        this.appendChild(clone);
         this.applyData(clone, this._swcValue);
       });
     }