How to listen for custom events defined web component

问题

I have a custom element my-checkbox that wraps a checkbox, label, styling, etc. When that checkbox is toggled I am defining a CustomEvent named check within my constructor, like so:

constructor(){
   super();
   this._shadowRoot = this.attachShadow({mode: 'open'});
   this.checkEvent = new CustomEvent("check", {
     bubbles: true,
     cancelable: false,
   });
 }

I dispatch that event when the checkbox is toggled:

toggleCheckbox(){
  this.dispatchEvent(this.checkEvent);
  console.log(this.checkEvent);
  ...
}

I infer that this event is being dispatched because the contents of the console.log show the signature of a CustomEvent

I have another custom element my-checkreport that contains my-checkbox and is supposed to react to the "check" event. I have defined an event listener in the connected callback of my-checkreport

connectedCallback(){
  ...
  this.addEventListener("check", function (e) {
        console.log('listend to check event');
        console.log(e);
    });
 }

However, this eventListener never fires, never seems to 'hear' the "check" event dispatched in the my-checkbox component. I've tried adding this listener in the constructor with the same result.

Any ideas what I'm doing wrong?

Background: I'm doing it this way in the interest of making these elements composable. I also have read that best practices for developing web components is to "Use custom events to pass information out of components..."

回答1:

If your compound element <my-checkreport> uses a Shadow DOM to embed its content (<my-checkbox>, label, styling...), dispatched events from an inner element (here <my-checkbox>) will be fired inside the (container's) Shadow DOM.

Therefore, you should add the event listener to the Shadow DOM's root of the compound custom element (this.shadowRoot) instead of to the element (this) itself. In <my-checkreport>:

connectedCallback(){
  ...
  this.shadowRoot.addEventListener("check", function (e) {
        console.log('listend to check event');
        console.log(e);
    });
 }

回答2:

For others who end up here, the specific property you're looking for to break out of the shadow root 'jail' is "composed".

So:

this.checkEvent = new CustomEvent("check", {
  bubbles: true,
  cancelable: false,
  composed: true
});

You can also add another property, "detail" which will carry custom data on the event, if you like.

More info here: composed property

来源：https://stackoverflow.com/questions/43061417/how-to-listen-for-custom-events-defined-web-component

标签

javascript

dom

web-component

shadow-dom

custom-element