Skip to content

Is not possible to listen events on ShadowRoot #4317

@blikblum

Description

@blikblum

Description

When trying to listen events on a ShadowRoot element using on, the handler is not fired.
The native addEventListener works

Minimal example:

const el = $("#test")[0];
el.attachShadow({ mode: "open" });
el.shadowRoot.innerHTML = `<div class=".inner">Inner content</div>`;
$(el.shadowRoot).on("click", ".inner", () => {
  console.log("jquery - shadow inner clicked");
});

The issue is that the element data returned by dataPriv is always empty because of this check

ShadowRoot elements have nodeType === 11

The issue pointed as reason for the check seems not valid for ShadowRoot elements which are supported only on modern browsers

So, changing the check for

return owner.nodeType === 1 || owner.nodeType === 9 || owner.nodeType === 11 || !( +owner.nodeType );

should work

Link to test case

https://codepen.io/blikblum/pen/QogVgO?editors=1111

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions