How to implement a <hot-table> in JavaScript?

Question

I want to use handsontable as a web component and that's why I used hot-table. I created a JS Fiddle sample as per this description.

However, the table is not displayed.

HTML

 <link rel="import" href="http://handsontable.github.io/hot-table/hot-table.html">
<template id="tpl" is="dom-bind">
  <hot-table width="655" height="295" datarows="{{ people }}" context-menu max-rows="{{ people.length }}"
             highlighted-row="{{ highlightedRow }}" class="htLeft">
    <hot-column width="30" read-only value="id" header="ID"></hot-column>
    <hot-column value="name.first" header="First Name">
      <template data-hot-role="renderer" is="dom-template"><span>{{ value }}</span>...</template>
    </hot-column>
    <hot-column width="100" value="name.last" header="Last Name"></hot-column>
    <hot-column width="100" type="date" value="date" header="Birthday"></hot-column>
    <hot-column value="gender" header="Gender" source="[[ genderSource ]]" type="dropdown"></hot-column>
    <hot-column type="numeric" value="age" header="Age"></hot-column>
    <hot-column type="checkbox" value="languages.english" header="English" checked-template="Yes"
                unchecked-template="No"></hot-column>
    <hot-column type="checkbox" value="languages.spanish" header="Spanish" checked-template="Yes"
                unchecked-template="No"></hot-column>
    <hot-column type="checkbox" value="languages.french" header="French" checked-template="Yes"
                unchecked-template="No"></hot-column>
    <hot-column type="numeric" value="salary" header="Salary" format="$ 0,0.00"></hot-column>
  </hot-table>
</template>

JavaScript

    var people = [
  {id: 1, date: '24/12/1986', name: {first: 'Joe', last: 'Fabiano'}, gender: 'Male', age: 21,
   languages: {english: 'Yes', spanish: 'Yes', french: 'No'}, salary: 2000},
  {id: 2, date: '30/01/1976', name: {first: 'Fred', last: 'Wecler'}, gender: 'Male', age: 25,
   languages: {english: 'Yes', spanish: 'No', french: 'No'}, salary: 2500},
  {id: 3, date: '14/07/1967', name: {first: 'Steve', last: 'Wilson'}, gender: 'Male', age: 32,
   languages: {english: 'Yes', spanish: 'No', french: 'No'}, salary: 1700},
  {id: 4, date: '14/06/1956', name: {first: 'Maria', last: 'Fernandez'}, gender: 'Female', age: 27,
   languages: {english: 'No', spanish: 'Yes', french: 'Yes'}, salary: 3000},
  {id: 5, date: '09/05/1975', name: {first: 'Pierre', last: 'Barbault'}, gender: 'Male', age: 46,
   languages: {english: 'Yes', spanish: 'No', french: 'Yes'}, salary: 1450},
  {id: 6, date: '01/01/1986', name: {first: 'Nancy', last: 'Moore'}, gender: 'Female', age: 34,
   languages: {english: 'Yes', spanish: 'No', french: 'No'}, salary: 2300},
  {id: 7, date: '04/03/1994', name: {first: 'Barbara', last: 'MacDonald'}, gender: 'Female', age: 19,
   languages: {english: 'Yes', spanish: 'No', french: 'No'}, salary: 1900},
  {id: 8, date: '01/04/1993', name: {first: 'Wilma', last: 'Williams'}, gender: 'Female', age: 33,
   languages: {english: 'Yes', spanish: 'Yes', french: 'Yes'}, salary: 2400},
  {id: 9, date: '01/05/1982', name: {first: 'Sasha', last: 'Silver'}, gender: 'Male', age: 27,
   languages: {english: 'Yes', spanish: 'No', french: 'Yes'}, salary: 2110},
  {id: 10, date: '03/10/1992', name: {first: 'Don', last: 'Pérignon'}, gender: 'Male', age: 42,
   languages: {english: 'No', spanish: 'No', french: 'Yes'}, salary: 2090},
  {id: 11, date: '01/10/1991', name: {first: 'Aaron', last: 'Kinley'}, gender: 'Female', age: 33,
   languages: {english: 'Yes', spanish: 'Yes', french: 'Yes'}, salary: 2799}
];

window.addEventListener('dom-change', function () {
  var tpl = document.getElementById('tpl');

  tpl.people = people;
  tpl.genderSource = ['Male', 'Female'];

  console.log('HotTableUtils', HotTableUtils);
});

Answer 1

There were few problems with your fiddle.

1. webcomponents-lite.js is a JavaScript, so it has to be loaded using a <script>tag. It is actually only needed for browsers other than Chrome
2. Your example uses Polymer 2, which does not have <template is="dom-bind">. It should use <dom-bind><template>
3. The event listener dom-change seems to be redundant

Fixed demo: https://jsfiddle.net/r0q4trwr/2/