dl-hello component

dl-hello.tsx

import { Component, State } from '@stencil/core'

@Component({
  tag: 'dl-hello',
})
export class DlHello {
  @State() booleanState: boolean = true

  componentDidLoad() {
    setInterval(() => {
      this.booleanState = ! this.booleanState
    }, 4000)
  }

  render() : JSX.Element {
    if (this.booleanState) {
      return (
        <div class="yes">
          <p>lorem yes</p>
          <slot name="first"></slot>
          <slot name="second"></slot>
        </div>
      )
    }

    return (
      <div class="no">
        <slot name="second"></slot>
        <slot name="first"></slot>
        <p>lorem no</p>
      </div>
    )
  }
}