StencilJS : How to listen the event in document/root level in StencilJS

In StencilJS, you can listen for events at the document level by using the @Listen decorator in your component. Here's an example of how to listen for an keydown event at the document level:

import { Component, Listen } from '@stencil/core';
@Component({
  tag: 'my-component',
})
export class MyComponent {
  @Listen('keydown', { target: 'document' }) // 'body' | 'document' | 'window';
  handleKeyDown(event: KeyboardEvent) {
    console.log(`Key ${event.key} was pressed`);
  }
  render() {
    return <div>Hello, world!</div>;
  }
}

In the example above, we have added the @Listen decorator to our component, specifying that we want to listen to the keydown event at the document level. We also specify the target as document. The handleKeyDown the method will be called whenever an keydown event is fired on the document.

Note that the @Listen a decorator can be used on any method within your component, not just on the render method.

You can listen for events at various levels, depending on your use case. Here are some of the event levels you can listen for:

• Component level: You can listen for events that are emitted by the component itself. To do this, use the @Listen decorator on a method within your component and specify the event name you want to listen for.
• Host level: You can listen for events that are emitted by the host element of your component. To do this, use the @Listen decorator on a method within your component and specify the event name you want to listen for, along with the target option set to host.
• Window level: You can listen for events that are fired on the window object. To do this, use the @Listen decorator on a method within your component and specify the event name you want to listen for, along with the target option set to window.
• Document level: You can listen for events that are fired on the document object. To do this, use the @Listen decorator on a method within your component and specify the event name you want to listen for, along with the target option set to document.

Here's an example of how to listen for a click the event at the host level:

import { Component, Listen } from '@stencil/core';

@Component({
  tag: 'my-component',
  host: {
    // Set the host element to a button
    tag: 'button',
  },
})
export class MyComponent {

  @Listen('click', { target: 'host' })
  handleClick() {
    console.log('The host element was clicked');
  }

  render() {
    return <div>Hello, world!</div>;
  }
}

In the example above, we have set the host option to be a button element. We have then added the @Listen decorator to our component, specifying that we want to listen to the click event at the host level. The handleClick method will be called whenever the host element is clicked.