title: LitElement render problem using SVG strings to construct nested SVGs
body: <p>I have a collection of SVG strings all with different viewBox attributes. I am trying to nest all of these SVGs within a parent SVG in a way that I can dynamically set their <code>x</code> and <code>y</code> attributes. Below is a minimal example of the solution I came up with. It doesn't render initially, however if in the browser devtools I add something like a blank line to the HTML, this seems to cause a re-render and the circles are rendered as expect. So the structure of the HTML produce is correct, it seems to be a problem LitElement/lit-html rendering before my code is "finished". </p>
  
  <p>I suspect the problem boils down to the way I am using templates with lit-html, and the LitElement and SVG aspects are irrelevant.</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;my-example&gt;&lt;/my-example&gt;
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>import { LitElement, svg } from "https://unpkg.com/lit-element?module";
  
  const circles = {
    big: `&lt;svg viewBox="0 0 100 100" width="300px" height="300px"&gt;
            &lt;circle cx="50" cy="50" r="50"/&gt;
          &lt;/svg&gt;`,
    small: `&lt;svg viewBox="0 0 200 200" width="300px" height="300px"&gt;
              &lt;circle cx="100" cy="100" r="60"/&gt;
            &lt;/svg&gt;`
  };
  
  class MyExample extends LitElement {
    render() {
      return svg`
        &lt;div class="ingredients"&gt;
          &lt;svg height="50vh" width="100%" viewBox="0 0 100 100"&gt;
            ${Object.keys(circles).map((circle, i) =&gt; {
              // create template from svg string
              const template = document.createElement("template");
              template.innerHTML = circles[circle];
              const clone = template.content.cloneNode(true);
              const svgNode = clone.querySelector("svg");
              const viewBoxAtt = clone
                .querySelector("svg")
                .getAttribute("viewBox");
  
              // create template from svg's contents (circle element)
              const template2 = document.createElement("template");
              template2.innerHTML = svgNode.innerHTML;
              const clone2 = template2.content.cloneNode(true);
  
              // place circle element in a new svg with dynamically set attributes
              return svg`&lt;svg viewBox=${viewBoxAtt} x=${i * 20} y=${i *
                20} height="30" width="30"&gt;${svg`${clone2}`}&lt;/svg&gt;`;
            })}
          &lt;/svg&gt;
        &lt;/div&gt;
      `;
    }
  }
  
  window.customElements.define("my-example", MyExample);
  </code></pre>