Sé que puedo reemplazar {layer.content} con la etiqueta <c-skills></c-skills> y que se muestra bien en el archivo HTML, pero ¿hay alguna manera de llamarlo desde el archivo JS y ponerlo? en la pestaña Declaración de contenido? Sé que ponerlo entre comillas no funciona y simplemente pegar la etiqueta tampoco funcionará. Mi objetivo principal es agregar el '' de js. HTML:

 <template > <!--Template for the content area--> <template for:each={tabs} for:item="layer"> <div id={layer.ariaControls} class={layer.cssClass} data-id={layer.Id} role="tabpanel" aria-labelledby={layer.Id} key={layer.Id}> {layer.Content} </div> </template> </div> </template>

JS:

 import { LightningElement } from 'lwc'; export default class masteriesAndFeats extends LightningElement { tabs = [{ title: "Masteries", Content: "content1", Id: "tab-scoped-1__item", cssTab:"slds-tabs_scoped__item slds-is-active slds-size_1-of-2 tabStyle", cssClass: "slds-tabs_scoped__content slds-show", index: "0", ariaControls:"tab-scoped-1", selected: "true", }, { title: "Feats", Content: "Content2", Id: "tab-scoped-2__item", cssTab:"slds-tabs_scoped__item slds-size_1-of-2 tabStyle", cssClass: "slds-tabs_scoped__content slds-hide", index: "-1", ariaControls:"tab-scoped-2", selected: "false", }]; handleClick(event) { this.tabs = this.tabs.map(tab => { if(tab.Id === event.target.dataset.link) { tab.cssClass = "slds-tabs_scoped__content slds-show"; tab.index = "0"; tab.selected = "true"; tab.cssTab = "slds-tabs_scoped__item slds-size_1-of-2 slds-is-active tabStyle"; } else { tab.cssClass = "slds-tabs_scoped__content slds-hide"; tab.index = "-1"; tab.selected = "false"; tab.cssTab = "slds-tabs_scoped__item slds-size_1-of-2 tabStyle"; } return tab; }); } }