d3.js won't work in a shadowDOM

Issue

I am building a tool that utilizes d3.js for data visualization. The tool relies on webcomponentss and the shadowDOM. d3.js is not able to select any nodes in the shadowDOM just by d3.select. Is there a way to get d3 working inside shadowdom or am I missing something obvious?

In detail:

d3.select("#insideShadowDom")

does not return / select anything provided you have something like

<web-component>
#document-fragment
   <div id="insideShadowDom"></div>
</web-component>

To clarify: The shadowDOM is generated by a framework. I found a way to get the initial shadowRoot (injected). However I’m still wondering if it is possible to tell d3 about the shadowDOM even though I don’t have the handle that createShadowRoot() returns.

Solution

While DOM selectors won’t work across DOMs, you can get access to a shadow root (at least in Chrome) through the .webkitShadowRoot property. Passing this to d3.select(), you can then select any elements in the shadow DOM as usual.

Demo here.

Answered By – Lars Kotthoff

Answer Checked By – Marie Seifert (FlutterFixes Admin)

Leave a Reply

Your email address will not be published.