optimize how initial HTML is set on initial render for JSX usage (Shadow DOM detection)

[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}\`;`;

[KaiPrince]

Note that the mdn docs recommend using document.importNode over cloneNode:

Avoid using cloneNode() on the content of a template element, because if the template contains custom elements, they will not be upgraded until they are inserted into the document.
Instead, use document.importNode() to clone the template content, so that any custom elements are upgraded using the definitions in the current document

https://developer.mozilla.org/en-US/docs/Web/API/Node/cloneNode

However, document is not available during SSR, so I was unable to implement this in #255 . Since WCC does not run in the browser, this may not even be applicable.

@thescientist13 , does WCC support the shadow dom of a custom element referencing another custom element?

[thescientist13]

Note that the mdn docs recommend using document.importNode over cloneNode:

Oh nice, yeah I think importNode is new, yeah? But yeah, I'm open to using that 👍

However, document is not available during SSR, so I was unable to implement this in #255 .

We do have Document as a shim, but since it is a shim, we would have to create our own implementation of importNode, like we had to do for cloneNode
https://github.com/ProjectEvergreen/wcc/blob/master/src/dom-shim.js#L85

Since WCC does not run in the browser, this may not even be applicable.

True, WCC does not, but the code that it outputs does; so if importNode is preferred / more performant / idiomatic, then that would definitely be useful to WCC users running that transpiled JSX code in the browser, so probably worth a stab at it, I think?

does WCC support the shadow dom of a custom element referencing another custom element?

Hmm, I think so? I feel like this was part of the discussion here, but I could be mis-remembering - #170

But just so we're on the same page, what do you mean in terms of support in this context, like accessing a child custom element through a query selector from a parent shadowroot? Maybe a small example to help illustrate what you mean?