d3.js won't work in a shadowDOM

Question

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.

Answer 1

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.

Answer 2

You can pass in object -- also, use var if you need to reference the object from a callback:

<polymer-element name="my-element">
    <template>
        <div id="foobar"></div>
    </template>
    <script>
        Polymer('my-element', {
            ready: function() {
                var foobar = this.$.foobar;
                someCallback(function() {
                    d3.select(foobar).
                    ...
                }); 
                ...
            }
        });
    </script>
</polymer-element>

Answer 3

I know this is old, however, with the latest Polymer version (1.0.0) you can access shadow dom elements with:

<template> ... <div id="elementId"></div> ... </template>


Polymer({
    ready: function() { var svg = d3.select(this.$.elementId).append('svg'; }
});

This will allow you to render the chart and appropriately select the shadow dom element.