title: Get acces to a variable which is into a "template" tag in polymer
body: <p>*Hello, i want to make a responsive timeline using D3.js and Polymer, but i have an issue. I've declared a div tag like this :</p>
  
  <pre><code>&lt;section flex flex-full-center&gt;
      &lt;div id="chart"&gt; &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>And i want to get my div with this line : </p>
  
  <pre><code>const element = document.getElementById("chart");
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/vaLuo.png" rel="nofollow noreferrer">It makes me this error message</a>
  I put my code here. (sorry for my English, i'm French).
  The <strong>my-timeline.html</strong> file : </p>
  
  <pre><code>    &lt;link rel="import" href="../bower_components/polymer/polymer.html"&gt;
  &lt;link rel="import" href="../bower_components/paper-slider/paper-slider.html"&gt;
  &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" /&gt;
  &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/0.0.1/prism.min.css" /&gt;
  &lt;link rel="stylesheet" href="https://rawgithub.com/Caged/d3-tip/master/examples/example-styles.css" /&gt;
  &lt;link rel="stylesheet" href="../dist/timeline-chart.css" /&gt;
  &lt;link rel="stylesheet" href="style.css" /&gt;
  &lt;script src="https://d3js.org/d3.v5.min.js"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript" src="../dist/timeline-chart.js"&gt;&lt;/script&gt;
  
  &lt;dom-module id="my-timeline"&gt;
    &lt;!-- Defines the element's style and local DOM --&gt;
    &lt;template&gt;
  
      &lt;style&gt;
        :host {
          display: block;
  
          padding: 16px;
        }
      &lt;/style&gt;
  
      &lt;h1&gt; Timeline - D3.js &lt;/h1&gt;
  
      &lt;paper-slider min="-100" max="100" value="50"&gt; &lt;/paper-slider&gt;
  
      &lt;section flex flex-full-center&gt;
          &lt;div id="chart"&gt; &lt;/div&gt;
      &lt;/section&gt;
  
    &lt;/template&gt;
  
  
  
  
      &lt;script id="code"&gt;
  
          'use strict';
  
          // const element = this.$.chart;
          // const element = d3.select(this.$.chart);
          const element = document.getElementById("chart");
  
  
          const data = [{
              label: 'Name',
              data: [{
                  type: TimelineChart.TYPE.POINT,
                  at: new Date([2016, 5, 1])
              }, {
                  type: TimelineChart.TYPE.POINT,
                  at: new Date([2016, 6, 1])
              }, {
                  type: TimelineChart.TYPE.POINT,
                  at: new Date([2016, 7, 1])
              }, {
                  type: TimelineChart.TYPE.POINT,
                  at: new Date([2016, 8, 1])
              }, {
                  type: TimelineChart.TYPE.POINT,
                  at: new Date([2016, 9, 1])
              }, {
                  type: TimelineChart.TYPE.POINT,
                  at: new Date([2016, 10, 1]),
                  customClass: 'blue-dot'
              }]
          }, {
              label: 'Type',
              data: [{
                  type: TimelineChart.TYPE.POINT,
                  at: new Date([2016, 5, 11])
              }, {
                  type: TimelineChart.TYPE.POINT,
                  at: new Date([2016, 5, 15])
              }, {
                  type: TimelineChart.TYPE.POINT,
                  at: new Date([2016, 7, 10])
              }, {
                  label: 'I\'m a label with a custom class',
                  type: TimelineChart.TYPE.INTERVAL,
                  from: new Date([2016, 6, 1]),
                  to: new Date([2016, 7, 1]),
                  customClass: 'blue-interval'
              }, {
                  type: TimelineChart.TYPE.POINT,
                  at: new Date([2016, 10, 1])
              }, {
                  type: TimelineChart.TYPE.POINT,
                  at: new Date([2016, 11, 1])
              }]
          }, {
              label: 'Imp',
              data: [{
                  label: 'Label 1',
                  type: TimelineChart.TYPE.INTERVAL,
                  from: new Date([2016, 5, 15]),
                  to: new Date([2016, 7, 1])
              }, {
                  label: 'Label 2',
                  type: TimelineChart.TYPE.INTERVAL,
                  from: new Date([2016, 8, 1]),
                  to: new Date([2016, 9, 12])
              }]
          }];
  
          const timeline = new TimelineChart(element, data, {
              enableLiveTimer: true,
              tip: function(d) {
                  return d.at || `${d.from}&lt;br&gt;${d.to}`;
              }
          }).onVizChange(e =&gt; console.log(e));
  
    &lt;/script&gt;
  
    &lt;!-- Creates the element's prototype and registers it --&gt;
    &lt;script&gt;
      Polymer({
        is: 'my-timeline'
      });
    &lt;/script&gt;
  
  
  &lt;/dom-module&gt;
  </code></pre>
  
  <p>the <strong>timeline-chart.js</strong> file :</p>
  
  <pre><code>(function (global, factory) {
      if (typeof define === "function" &amp;&amp; define.amd) {
          define(['module'], factory);
      } else if (typeof exports !== "undefined") {
          factory(module);
      } else {
          var mod = {
              exports: {}
          };
          factory(mod);
          global.TimelineChart = mod.exports;
      }
  })(this, function (module) {
      'use strict';
  
      function _classCallCheck(instance, Constructor) {
          if (!(instance instanceof Constructor)) {
              throw new TypeError("Cannot call a class as a function");
          }
      }
  
      var _createClass = function () {
          function defineProperties(target, props) {
              for (var i = 0; i &lt; props.length; i++) {
                  var descriptor = props[i];
                  descriptor.enumerable = descriptor.enumerable || false;
                  descriptor.configurable = true;
                  if ("value" in descriptor) descriptor.writable = true;
                  Object.defineProperty(target, descriptor.key, descriptor);
              }
          }
  
          return function (Constructor, protoProps, staticProps) {
              if (protoProps) defineProperties(Constructor.prototype, protoProps);
              if (staticProps) defineProperties(Constructor, staticProps);
              return Constructor;
          };
      }();
  
      var TimelineChart = function () {
          function TimelineChart(element, data, opts) {
              _classCallCheck(this, TimelineChart);
  
              var self = this;
  
              element.classList.add('timeline-chart'); /* PROBLEME */
  
              var options = this.extendOptions(opts);
  
              var allElements = data.reduce(function (agg, e) {
                  return agg.concat(e.data);
              }, []);
  
              var minDt = d3.min(allElements, this.getPointMinDt);
              var maxDt = d3.max(allElements, this.getPointMaxDt);
  
              var elementWidth = options.width || element.clientWidth;
              var elementHeight = options.height || element.clientHeight;
  
              var margin = {
                  top: 0,
                  right: 0,
                  bottom: 20,
                  left: 0
              };
  
              var width = elementWidth - margin.left - margin.right;
              var height = elementHeight - margin.top - margin.bottom;
  
              var groupWidth = options.hideGroupLabels ? 0 : 200;
  
              var x = d3.time.scale().domain([minDt, maxDt]).range([groupWidth, width]);
  
              var xAxis = d3.svg.axis().scale(x).orient('bottom').tickSize(-height);
  
              var zoom = d3.behavior.zoom().x(x).on('zoom', zoomed);
  
              var svg = d3.select(element).append('svg').attr('width', width + margin.left + margin.right).attr('height', height + margin.top + margin.bottom).append('g').attr('transform', 'translate(' + margin.left + ',' + margin.top + ')').call(zoom);
  
              svg.append('defs').append('clipPath').attr('id', 'chart-content').append('rect').attr('x', groupWidth).attr('y', 0).attr('height', height).attr('width', width - groupWidth);
  
              svg.append('rect').attr('class', 'chart-bounds').attr('x', groupWidth).attr('y', 0).attr('height', height).attr('width', width - groupWidth);
  
              svg.append('g').attr('class', 'x axis').attr('transform', 'translate(0,' + height + ')').call(xAxis);
  
              if (options.enableLiveTimer) {
                  self.now = svg.append('line').attr('clip-path', 'url(#chart-content)').attr('class', 'vertical-marker now').attr("y1", 0).attr("y2", height);
              }
  
              var groupHeight = height / data.length;
              var groupSection = svg.selectAll('.group-section').data(data).enter().append('line').attr('class', 'group-section').attr('x1', 0).attr('x2', width).attr('y1', function (d, i) {
                  return groupHeight * (i + 1);
              }).attr('y2', function (d, i) {
                  return groupHeight * (i + 1);
              });
  
              if (!options.hideGroupLabels) {
                  var groupLabels = svg.selectAll('.group-label').data(data).enter().append('text').attr('class', 'group-label').attr('x', 0).attr('y', function (d, i) {
                      return groupHeight * i + groupHeight / 2 + 5.5;
                  }).attr('dx', '0.5em').text(function (d) {
                      return d.label;
                  });
  
                  var lineSection = svg.append('line').attr('x1', groupWidth).attr('x2', groupWidth).attr('y1', 0).attr('y2', height).attr('stroke', 'black');
              }
  
              var groupIntervalItems = svg.selectAll('.group-interval-item').data(data).enter().append('g').attr('clip-path', 'url(#chart-content)').attr('class', 'item').attr('transform', function (d, i) {
                  return 'translate(0, ' + groupHeight * i + ')';
              }).selectAll('.dot').data(function (d) {
                  return d.data.filter(function (_) {
                      return _.type === TimelineChart.TYPE.INTERVAL;
                  });
              }).enter();
  
              var intervalBarHeight = 0.8 * groupHeight;
              var intervalBarMargin = (groupHeight - intervalBarHeight) / 2;
              var intervals = groupIntervalItems.append('rect').attr('class', withCustom('interval')).attr('width', function (d) {
                  return Math.max(options.intervalMinWidth, x(d.to) - x(d.from));
              }).attr('height', intervalBarHeight).attr('y', intervalBarMargin).attr('x', function (d) {
                  return x(d.from);
              });
  
              var intervalTexts = groupIntervalItems.append('text').text(function (d) {
                  return d.label;
              }).attr('fill', 'white').attr('class', withCustom('interval-text')).attr('y', groupHeight / 2 + 5).attr('x', function (d) {
                  return x(d.from);
              });
  
              var groupDotItems = svg.selectAll('.group-dot-item').data(data).enter().append('g').attr('clip-path', 'url(#chart-content)').attr('class', 'item').attr('transform', function (d, i) {
                  return 'translate(0, ' + groupHeight * i + ')';
              }).selectAll('.dot').data(function (d) {
                  return d.data.filter(function (_) {
                      return _.type === TimelineChart.TYPE.POINT;
                  });
              }).enter();
  
              var dots = groupDotItems.append('circle').attr('class', withCustom('dot')).attr('cx', function (d) {
                  return x(d.at);
              }).attr('cy', groupHeight / 2).attr('r', 5);
  
              if (options.tip) {
                  if (d3.tip) {
                      var tip = d3.tip().attr('class', 'd3-tip').html(options.tip);
                      svg.call(tip);
                      dots.on('mouseover', tip.show).on('mouseout', tip.hide);
                  } else {
                      console.error('Please make sure you have d3.tip included as dependency (https://github.com/Caged/d3-tip)');
                  }
              }
  
              zoomed();
  
              if (options.enableLiveTimer) {
                  setInterval(updateNowMarker, options.timerTickInterval);
              }
  
              function updateNowMarker() {
                  var nowX = x(new Date());
  
                  self.now.attr('x1', nowX).attr('x2', nowX);
              }
  
              function withCustom(defaultClass) {
                  return function (d) {
                      return d.customClass ? [d.customClass, defaultClass].join(' ') : defaultClass;
                  };
              }
  
              function zoomed() {
                  if (self.onVizChangeFn &amp;&amp; d3.event) {
                      self.onVizChangeFn.call(self, {
                          scale: d3.event.scale,
                          translate: d3.event.translate,
                          domain: x.domain()
                      });
                  }
  
                  if (options.enableLiveTimer) {
                      updateNowMarker();
                  }
  
                  svg.select('.x.axis').call(xAxis);
  
                  svg.selectAll('circle.dot').attr('cx', function (d) {
                      return x(d.at);
                  });
                  svg.selectAll('rect.interval').attr('x', function (d) {
                      return x(d.from);
                  }).attr('width', function (d) {
                      return Math.max(options.intervalMinWidth, x(d.to) - x(d.from));
                  });
  
                  svg.selectAll('.interval-text').attr('x', function (d) {
                      var positionData = getTextPositionData.call(this, d);
                      if (positionData.upToPosition - groupWidth - 10 &lt; positionData.textWidth) {
                          return positionData.upToPosition;
                      } else if (positionData.xPosition &lt; groupWidth &amp;&amp; positionData.upToPosition &gt; groupWidth) {
                          return groupWidth;
                      }
                      return positionData.xPosition;
                  }).attr('text-anchor', function (d) {
                      var positionData = getTextPositionData.call(this, d);
                      if (positionData.upToPosition - groupWidth - 10 &lt; positionData.textWidth) {
                          return 'end';
                      }
                      return 'start';
                  }).attr('dx', function (d) {
                      var positionData = getTextPositionData.call(this, d);
                      if (positionData.upToPosition - groupWidth - 10 &lt; positionData.textWidth) {
                          return '-0.5em';
                      }
                      return '0.5em';
                  }).text(function (d) {
                      var positionData = getTextPositionData.call(this, d);
                      var percent = (positionData.width - options.textTruncateThreshold) / positionData.textWidth;
                      if (percent &lt; 1) {
                          if (positionData.width &gt; options.textTruncateThreshold) {
                              return d.label.substr(0, Math.floor(d.label.length * percent)) + '...';
                          } else {
                              return '';
                          }
                      }
  
                      return d.label;
                  });
  
                  function getTextPositionData(d) {
                      this.textSizeInPx = this.textSizeInPx || this.getComputedTextLength();
                      var from = x(d.from);
                      var to = x(d.to);
                      return {
                          xPosition: from,
                          upToPosition: to,
                          width: to - from,
                          textWidth: this.textSizeInPx
                      };
                  }
              }
          }
  
          _createClass(TimelineChart, [{
              key: 'extendOptions',
              value: function extendOptions() {
                  var ext = arguments.length &gt; 0 &amp;&amp; arguments[0] !== undefined ? arguments[0] : {};
  
                  var defaultOptions = {
                      intervalMinWidth: 8, // px
                      tip: undefined,
                      textTruncateThreshold: 30,
                      enableLiveTimer: false,
                      timerTickInterval: 1000,
                      hideGroupLabels: false
                  };
                  Object.keys(ext).map(function (k) {
                      return defaultOptions[k] = ext[k];
                  });
                  return defaultOptions;
              }
          }, {
              key: 'getPointMinDt',
              value: function getPointMinDt(p) {
                  return p.type === TimelineChart.TYPE.POINT ? p.at : p.from;
              }
          }, {
              key: 'getPointMaxDt',
              value: function getPointMaxDt(p) {
                  return p.type === TimelineChart.TYPE.POINT ? p.at : p.to;
              }
          }, {
              key: 'onVizChange',
              value: function onVizChange(fn) {
                  this.onVizChangeFn = fn;
                  return this;
              }
          }]);
  
          return TimelineChart;
      }();
  
      TimelineChart.TYPE = {
          POINT: Symbol(),
          INTERVAL: Symbol()
      };
  
      module.exports = TimelineChart;
  });
  // # sourceMappingURL=timeline-chart.js.map
  </code></pre>
  
  <p>The main issue is that i can't get access to my div tag (named "<strong>chart</strong>").</p>