optimize how initial HTML is set on initial render for JSX usage

[thescientist13]

Summary

Currently as part of initializing a component (either Light or Shadow DOM) from render function when using JSX, we use innerHTML in a couple scenarios

1. Light DOM uses innerHTML
2. Shadow DOM, if there is a root but no HTML (like say injecting dynamic content at run time, a la htmx)

const renderHandler = hasShadowRoot
  ? `
      const template = document.createElement('template');
      template.innerHTML = \`${serializedHtml}\`;

      if(!${elementRoot}) {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.appendChild(template.content.cloneNode(true));
      } else {
        this.shadowRoot.innerHTML = template.innerHTML;
      }
    `
  : `${elementRoot}.innerHTML = \`${serializedHtml}\`;`;

Details

It would be nice in either of these cases if we could just "push" the template right into the node, instead of using innerHTML which has a couple downsides

• In some cases it just wont work - browser warning about "declarative Shadow DOM has not been enabled by includeShadowRoots" #130
• even if it did, it invokes the HTML parser, which is an overhead
• potential security concern around XSS

So, instead would be nice to see if we could leverage actual DOM APIs , like say replaceWith, just like we are able to leverage appendNode.

const renderHandler = hasShadowRoot
  ? `
      const template = document.createElement('template');
      template.innerHTML = \`${serializedHtml}\`;

      if(!${elementRoot}) {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.appendChild(template.content.cloneNode(true));
      } else {
        this.shadowRoot.replaceNode(template);
      }
    `
  : `${elementRoot}.innerHTML = \`${serializedHtml}\`;`;