feat: node.eventListeners/getEventListeners(node) alternative to conditionally render internal elements, when an @Event has listeners. about stencil HOT 2 OPEN

import { Component, Fragment, Event, h, EventEmitter, Watch } from '@stencil/core';

@Component({
  tag: 'my-component',
  styleUrl: 'my-component.css',
  shadow: true,
})
export class MyComponent {
  @Event({
    eventName: 'dynamicListener',
    composed: true,
    cancelable: true,
    bubbles: true,
  }) dynamicListener: EventEmitter<HTMLButtonElement>;

  @Watch('dynamicListener')
  watchListenerHandler(newValue: boolean, oldValue: boolean) {
    console.log('The old value of activated is: ', oldValue);
    console.log('The new value of activated is: ', newValue);
  }

  render() {
    const self = this;
    /**
     * fails because Stencil's EventListener currently only provides
     * the following interface: { emit: (data: any) => void }
     */
    const hasListener = this.dynamicListener.observers.length > 0;

    const btn = hasListener
      ? (<button onClick={function () {
        return self.dynamicListener.emit(this)
        }}>
          Hello
        </button>
      )
      : <>not</>
    return <div>click me: {btn}</div>;
  }
}