Is not possible to listen events on ShadowRoot
Author: blikblumCreated Mar 9, 2019Updated Jul 21, 2026
LabelsEventhelp wanted
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
Source: jquery/jquery