title: How to Programmatically render webcomponent as child of another component in VanillaJs?
body: <p>I'm trying to learn vanilla webcomponents and I am stuck trying to do something simple and no combination of keywords I can think of return anything helpful in Google.</p>
  <p>So in my render method, I see all sorts of examples that manually construct a tag and assign all the attribute, like so:</p>
  <pre><code>render() 
  {
      this.innerHTML = `
      ${
          this.data
          .map(reason =&gt; 
              `&lt;${ReasonItem.elementName}
                  name=&quot;${reason.Name}&quot;
                  description=&quot;${reason.Description}&quot;&gt;
                  &lt;/${ReasonItem.elementName}&gt;`)
          .join('')
      }
      `;
  }
  </code></pre>
  <p>This works, but it's extremely tedious for child controls that have LOTS of attributes.</p>
  <p>I would like to do something like:</p>
  <pre><code>render()
  {
      this.innerHTML = `
      ${
          this.data
          .map(reason =&gt; 
          {
              let child = new ReasonItem();
              child.reason = reason;
              child.render();
              return child.outerHTML;
          })
          .join('')
      }
      `;
  </code></pre>
  <p>This almost works, but apparently the constructor and other methods on an HTMLElement can be called out of order so I'm getting 'unidentified' in all my elements since the constructor calls render() and the setting of the property calls render(), but the constructors render is being called after the property is set, so I'm thinking I'm not doing this right.</p>
  <p>Thank you for your time and attention.</p>