I am trying to raise events out of a webponent, but it does.

<my-ponent id="xyz" bez="hallo" hello="myScript()"></my-ponent>
<script>
    xyz.addEventListener("hello", function(event) {
        console.log(event.detail.name);
    });
</script>

Neither the html-tag "hello" does raise the event, nor the event-listener does.

The web ponent looks like this:

var button=document.createElement("button");
button.innerHTML=cap;
button.addEventListener('click', () => {
    console.log("click");
        
    button.dispatchEvent(new CustomEvent("hello", {
        detail: { name: "John" }
    }));
});
    
shadow.appendChild(button);

Can anyone help me please to find the mistake? Thanks a lot.

Code-Fiddle here: /

I am trying to raise events out of a webponent, but it does.

<my-ponent id="xyz" bez="hallo" hello="myScript()"></my-ponent>
<script>
    xyz.addEventListener("hello", function(event) {
        console.log(event.detail.name);
    });
</script>

Neither the html-tag "hello" does raise the event, nor the event-listener does.

The web ponent looks like this:

var button=document.createElement("button");
button.innerHTML=cap;
button.addEventListener('click', () => {
    console.log("click");
        
    button.dispatchEvent(new CustomEvent("hello", {
        detail: { name: "John" }
    }));
});
    
shadow.appendChild(button);

Can anyone help me please to find the mistake? Thanks a lot.

Code-Fiddle here: https://jsfiddle/b43uqsLp/2/

• javascript
• events
• web-ponent

2 Answers 2

There is some information missing in the other answer

• the button click listener is inside shadowDOM, so posed has no use
• default listeners like click are not stopped by shadowDOM
• !!! CustomEvents require both posed:true and bubbles:true to escape Custom Elements with 'open' shadowDOM.
• do not attach listeners in the connectedCallback unless you are 100% certain that is what you want; the connectedCallback runs again when DOM elements are moved in the document
• super() returns and sets the 'this', and attachShadow() returns and sets the this.shadowRoot reference, no need to use your own variables.
  run super first means you can't access 'this' before it is created; but you can run any JS you want before the super() call

This JSFiddle: https://jsfiddle/CustomElementsExamples/qody0u4n/

shows posed and bubbles behaviour, with extra listeners on the document

  document.addEventListener("click", (evt) => log(evt, 'document'));
  document.addEventListener("MyEvent", (evt) => log(evt, 'document'));

<my-ponent id=ONE></my-ponent>
<my-ponent id=TWO posed>
    <my-ponent id=INSIDETWO posed></my-ponent>
</my-ponent>
<my-ponent id=THREE posed bubbles>
    <my-ponent id=INSIDETHREE posed bubbles></my-ponent>
</my-ponent>

notes

• none of the MyEvents are caught by element ONE or the document

• The document only receives the CustomEvent("MyEvent") when both posed and bubbles are set

• The posed event does not stop at the shadowRoot boundary! It is halted at the Custom Element boundary. In the JSfiddle there are additional DOMlisteners on my-ponent to demonstrate this.

Also see: https://pm.dartus.fr/blog/a-plete-guide-on-shadow-dom-and-event-propagation/

The problem occurs because of the Shadow DOM (try to inspect your ponent and you will see what I mean):

Good news, it's really simple to fix - just propagate the event across the shadow DOM into the regular DOM via posed: true property in your CustomEvent's options:

button.dispatchEvent(new CustomEvent("hello", {
    detail: { name: "John" },
    posed: true // Like this
}));

Here is JSFIDDLE.