Untitled

<!DOCTYPE html>
<template id="base-table">
  <table id="monthly-table">
    <thead>
      <tr>
        <th>月</th>
        <th>収穫量</th>
        <th>売上</th>
      </tr>
    </thead>
    <tbody id="monthly-table-body"></tbody>
  </table>
</template>
<script>
var monthlyTableDocument = this.document.currentScript.ownerDocument;
var MonthlyTable = Object.create(HTMLElement.prototype);
var data = [
  [21,42],
  [22,44],
  [23,46],
  [24,48],
  [25,50],
  [26,52],
  [27,54],
  [28,56],
  [29,58],
  [30,60],
  [31,62],
  [32,64]
];
MonthlyTable.createdCallback = function () {
  console.log(window)
  var self = this;
  var root = this.createShadowRoot();
  var template = monthlyTableDocument.querySelector('#base-table');
  var clone = document.importNode(template.content, true);
  root.appendChild(clone)
  self.addEventListener('draw', function() {
    var startmonth = +this.getAttribute('startmonth');
    var endmonth = +this.getAttribute('endmonth');

    var tbody = root.getElementById('monthly-table-body');
    tbody.innerHTML='';
    for(var i=startmonth;i<=endmonth;i++){
      tbody.innerHTML+=('<tr><td>'+i+'</td><td>'+data[i][0]+'</td><td>'+data[i][1]+'</td></tr>');
    }
  });

  var drawEvent = new Event('draw');
  self.dispatchEvent(drawEvent);
};

document.registerElement('monthly-table', {
  prototype: MonthlyTable
});
</script>

WebComponentsのデモ

<!DOCTYPE html>
<script>
var DaterangePicker = Object.create(HTMLElement.prototype);

DaterangePicker.createdCallback = function () {
  var self = this;
  var root = this.createShadowRoot();
  root.innerHTML = '<input type="text" id="startmonth"><input type="text" id="endmonth">';
  var update = function(){
    self.setAttribute(this.id,this.value);
  }
  root.getElementById('startmonth').onchange = update;
  root.getElementById('endmonth').onchange = update;
};
document.registerElement('daterange-picker', {
  prototype: DaterangePicker
});
</script>

<!DOCTYPE html>
<link rel="import" href="monthly-table.html">
<link rel="import" href="daterange-picker.html">
<template id="report-tamplate">
  <daterange-picker></daterange-picker>
  <button id="update-button">更新</button>
  <monthly-table startmonth="2" endmonth="5"></monthly-table>
</template>

<script>
var monthlyReportDocument = this.document.currentScript.ownerDocument;
var MonthlyReport = Object.create(HTMLElement.prototype);

MonthlyReport.createdCallback = function () {
  var self = this;
  var root = this.createShadowRoot();
  var template = monthlyReportDocument.querySelector('#report-tamplate');
  var clone = document.importNode(template.content, true);
  root.appendChild(clone);
  var daterangePicker = root.querySelector('daterange-picker');
  var monthlyTable = root.querySelector('monthly-table');
  root.getElementById('update-button').onclick = function(){
    monthlyTable.setAttribute('startmonth',daterangePicker.getAttribute('startmonth'));
    monthlyTable.setAttribute('endmonth',daterangePicker.getAttribute('endmonth'));
    var drawEvent = new Event('draw');
    monthlyTable.dispatchEvent(drawEvent);
  };
};
document.registerElement('monthly-report', {
  prototype: MonthlyReport
});
</script>

<link rel="import" href="monthly-report.html">
<monthly-report></monthly-report>