title: How to embed a D3 chart in a Polymer.dart element?
body: <p>Browser: Dartium Version 34.0.1847.0 (258268)</p>
  
  <p>I want to embed D3 inside Polymer.dart elements and I'm just beginning to sort out how Dart and JS interoperate. I started by creating a vanilla HTML page using HTML5/CSS3/JS from D3's introductory tutorial on <a href="http://bost.ocks.org/mike/bar/" rel="nofollow">how to make a bar chart</a> to be sure my D3 implementation worked in Dartium.</p>
  
  <p>I then moved the D3 code into a custom polymer element  (shown below) and its companion dart source file (not shown). How do I instruct D3 to perform its selection inside the shadow DOM?</p>
  
  <pre><code>&lt;!-- D3 code copied from: http://bost.ocks.org/mike/bar/ --&gt;
  &lt;polymer-element name="dart-js"&gt;
      &lt;template&gt;
          &lt;!-- D3 style --&gt;
          &lt;style&gt;
              .chart div {
                  font: 10px sans-serif;
                  background-color: steelblue;
                  text-align: right;
                  padding: 3px;
                  margin: 1px;
                  color: white;
              }
          &lt;/style&gt;
  
          &lt;content&gt;
              &lt;!-- D3 container --&gt;
              &lt;div class="chart"&gt;inside dart-js shadow-root&lt;/div&gt;
  
              &lt;!-- D3 JS --&gt;
              &lt;script type="application/javascript"&gt;
                  console.log("inside content");
  
                  var data = [4, 8, 15, 16, 23, 42];
                  console.log("data: " + data); // data: 4,8,15,16,23,42
  
                  console.log("select: &lt;" + d3.select(".chart") + "&gt;"); // select: &lt;&gt;
  
                  // How do I instruct d3 to search inside the shadow DOM?
                  d3.select(".chart")
                          .selectAll("div")
                          .data(data)
                          .enter().append("div")
                          .style("width", function (d) { return d * 10 + "px"; })
                          .text(function (d) { return d; })
  
              &lt;/script&gt;
          &lt;/content&gt;
  
      &lt;/template&gt;
      &lt;script type="application/dart;component=1" src="dart_js.dart"&gt;&lt;/script&gt;
  &lt;/polymer-element&gt;
  </code></pre>