d3.js won't work in a shadowDOM

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>

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 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.