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.
سؤال
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.
المحلول 2
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.
نصائح أخرى
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>
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.