Estoy tratando de usar Stencil.js para crear un componente de pestañas con la siguiente estructura:

 <custom-tabs> <custom-tab active label="Label 1"> Some generic HTML content <custom-rating value="4"></custom-rating> </custom-tab> <custom-tab active label="Label 2"> Some more generic HTML content <custom-rating value="5"></custom-rating> </custom-tab> </custom-tabs>

El componente principal necesita representar el HTML subyacente analizando cada componente de 'pestaña personalizada' (que no tiene el método de representación) y extrayendo el parámetro 'etiqueta' de cada pestaña, creando la lista de navegación de esas etiquetas y extrayendo de manera similar el el contenido principal de cada pestaña y se muestra en el panel correspondiente de la pestaña.

En mi componente principal, tomo las pestañas en el gancho 'componentWillLoad'

 componentWillLoad() { // Grab tabs from this component this.tabs = Array.from(this.el.querySelectorAll('custom-tab')); console.log(this.tabs); }

y luego en la función de renderizado trato de generar el contenido:

 return ( <div> {this.tabs.map((tab: HTMLCustomTabElement, index: number) => { return ( <div role="tab" onClick={() => this.openTab(index)}> {tab.label} {tab.innerHTML} </div> ); })} </div> );

El problema es que tab.innerHTML no analiza el componente custom-rating y solo lo muestra como texto. ¿Podría sugerir la forma correcta de mostrar el contenido de la pestaña para que todo se analice correctamente?