// Takes a root element and a list of ids of shadow host elements. Each id refers to a shadow host
// inside the previous id's shadow tree.
function getElementByShadowIds(root, ids) {
  for (var i = 0; ;i++) {
    var host = root.getElementById(ids[i]);
    if (host == null) {
      throw "No element found: i=" + i + " id=" + ids[i] + ". Root was " + root;
    }
    if (i == ids.length - 1) {
      return host;
    }
    root = host.shadowRoot;
    if (root == null) {
      throw "No shadowRoot found: i=" + i + " id=" + ids[i] + ". Host was " + host;
    }
  }
}

// Installs a mininal custom element based on this template.
function installCustomElement(element_name, template_id) {
  ceClass = class extends HTMLElement {
    constructor() {
      super();
      var template = document
        .getElementById(template_id)
        .content;
      this
        .attachShadow({mode: 'open'})
        .appendChild(template.cloneNode(true));
    }
  };
  window.customElements.define(element_name, ceClass);
}