Así es como usaría mi componente

 <stencil-button icon="done"> Hello world </stencil-button>

Me gustaría evitar pasar una ranura llamada fragmento html a mi componente cada vez

 <stencil-button icon="done"> <span slot="text">Hello world</span> </stencil-button>

En la función render() , estoy acostumbrado a ocultar un elemento si no le paso ranuras con nombre:

 render () { return ( <Host> { this.icon && <mds-icon name={this.icon} /> } { this.hasText && <mds-text typography={...}><slot name="text"/></mds-text> } </Host> ) }

Con ranuras con nombre , estoy acostumbrado a hacer esto:

 componentWillLoad ():void { this.hasText = this.hostElement.querySelector('[slot="text"]') !== null }

Pero con tragamonedas sin nombre no puedo encontrar una manera de hacerlo, he intentado algunas formas sin éxito:

 render () { return ( <Host> { this.icon && <mds-icon name={this.icon} /> } { this.hasText && <mds-text typography={...}><slot/></mds-text> } </Host> ) }

Pensé que funcionaba comprobando si no le paso innerHTML :

 componentWillLoad ():void { this.hasText = this.hostElement.innerHTML !== '' }

Esto no funcionará porque innerHTML cambia en componentDidRender() .

Entonces, ¿cómo puedo hacer eso sin ser forzado a pasar un elemento?