How can I check if an unnamed slot is empty with StencilJS?

Question

This is how I would use my component

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

I'd like to avoid to pass a slot named html fragment to my component every time

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

---

In render() function, I'm used to hide an element if I dont's pass named slots to it:

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

With named slots, I'm used to do this:

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

But with unnamed slots i cannot find a way to do it, I've tried some ways without success:

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

I thought it worked by checking if I dont's pass innerHTML to it:

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

This won't work because innerHTML changes in componentDidRender().

So, how can I do that without be forced to pass an element?

Answer 1

I dunno why it wasn't working, but this is working form me:

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