title: Elements declared in HTML after Custom Element do not render
body: <p><strong>REAL BIG EDIT:</strong>
  Hello there, this is edit number 3. This one is here on top because, well, it changes the fundamental question of this post.
  In short, I tried putting <code>h1</code>s both before and after a single Custom Element. Well... only what I have putted <em>before</em> rendered. So, I guess the problem is that <strong>no elements are rendered after my Custom Elements</strong>.
  I'm not deleting my old observations below for recording purposes, since someone may happen to strumble in this problem and understand it wrong, like me.</p>
  
  <hr>
  
  <p>I'm trying a little bit with Custom Elements v1 on Chrome but things aren't quite right.</p>
  
  <p>The custom element in question - I call it <code>range-slider</code> - is just a bunch of <code>1 label</code>, 1 <code>input range</code> and 1 <code>input number</code> put together and styled, plus <code>number</code> and <code>range</code> are bind to each other.</p>
  
  <p>RangeSlider.js:</p>
  
  <pre><code>class RangeSlider extends HTMLElement {
      constructor() {
          super();
      }
      connectedCallback() {
          this.initShadowDom();
          this.flowInputToElem("field", "slider");
          this.flowInputToElem("slider", "field");
      }
  
      initShadowDom() {
          const shadowRoot = this.attachShadow({mode: "open"});
          shadowRoot.innerHTML = this.template;
      }
      flowInputToElem(inputId, elemId) {
          const shadowRoot = this.shadowRoot;
          const input = shadowRoot.getElementById(inputId);
          const elem = shadowRoot.getElementById(elemId);
  
          input.addEventListener("input", e =&gt; {
              const min = parseFloat(elem.min);
              const max = parseFloat(elem.max);
              const newVal = parseFloat(input.value);
  
              elem.value = newVal &gt; max
                  ? max
                  : newVal &lt; min
                      ? min
                      : newVal;
          });
      }
  
      get label() {
          return this.getAttribute("label") || "Range slider";
      }
      get min() {
          return this.getAttribute("min") || 0;
      }
      get max() {
          return this.getAttribute("max");
      }
      get value() {
          return this.getAttribute("value") || 0;
      }
  
      get template() {
          return `
              &lt;style&gt;
                  @import url('style/appearance.css');
                  @import url('style/color.css');
                  @import url('style/size.css');
                  @import url('style/position.css');
                  @import url('components/rangeSlider/style/slider.css');
              &lt;/style&gt;
              &lt;form class="w-max arial"&gt;
                  &lt;label for="field"&gt;${this.label}:&lt;/label&gt;
                  &lt;div class="flx flx-middle"&gt;
                      &lt;input id="slider" type="range" min="${this.min}" max="${this.max}" value="${this.value}" class="slider 
                          w-big"&gt;
                      &lt;input id="field" type="number" min="0" max="${Infinity}" value="${this.value}" class="mrg-none 
                          spin-none brd-none w-small bg-transp txt-center"&gt;
                  &lt;/div&gt;
              &lt;/form&gt;
          `;
      }
  }
  
  window.customElements.define('range-slider', RangeSlider);
  </code></pre>
  
  <p>In my understanding, everything seems to be fine with <code>range-slider</code>. In fact, it works; well, kind of. If I put more than 1 <code>range-slider</code> on my index.html, only the first one is rendered.</p>
  
  <p>index.html:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Pegada de carbono&lt;/title&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  
      &lt;link rel="stylesheet" type="text/css" href="style/position.css"&gt;
      &lt;link rel="stylesheet" type="text/css" href="style/color.css"&gt;
      &lt;link rel="stylesheet" type="text/css" href="style/size.css"&gt;
  
      &lt;script src="components/rangeSlider/RangeSlider.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body class="pos-abs h-fill w-fill mrg-none pdg-none bg-white"&gt;
      &lt;range-slider label="example 1" min="0" max="100" value="25"&gt;&lt;/range-slider&gt;
      &lt;range-slider label="example 2" min="0" max="100" value="45"&gt;&lt;/range-slider&gt;
      &lt;range-slider label="example 3" min="0" max="100" value="65"&gt;&lt;/range-slider&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Chrome: 
  <a href="https://i.stack.imgur.com/9Tq5Z.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9Tq5Z.png" alt="Only the first range-slider happened to render"></a></p>
  
  <p>Why is that?</p>
  
  <p><strong>EDIT:</strong>
  Strangely enough, when I append the element by JavaScript it renders as expected.</p>
  
  <pre><code>const rangeSlider = document.createElement("range-slider");
  rangeSlider.label = "example 4";
  rangeSlider.value = "65";
  rangeSlider.max = "1000";
  rangeSlider.min = "0";
  
  document.body.appendChild(rangeSlider);
  </code></pre>
  
  <p><strong>EDIT 2:</strong>
  Okay, I have done some more testing and weirder things happened:
   1. if I put 1 native element then 1 <code>range-slider</code> (or vice-versa),
      everything renders okay;
   2. if I put <code>range-slider</code>, native component then another <code>range-slider</code>, only the first <code>range-slider</code> renders; (which means not even the native component is okay)
   3. if I try to add <code>range-slider</code>s inside another Custom Element, the outer Custom Element is good and <code>range-slider</code> number 1 too, but all the other <code>range-slider</code>s are not.</p>