Support getInnerHtml() for SSR of declarative shadow DOM

[ttraenkler]

linkedom would be a great fit for lightweight SSR of web components, missing only Element.getInnerHTML(). Here is a polyfill that might serve as a starting point for an implementation.

For server side rendering of web components, declarative shadow DOM has recently been standardized and shipped in all major browsers except Firefox, Mozilla's position being positive on this feature as well.

Similar to Element.innerHTML, the new function Element.getInnerHTML() will serialize DOM elements including the shadowroots of custom elements which are skipped by innerHTML. In essence, wherever a <custom-element> is found in the DOM, the corresponding template will be inlined with <template shadowrootmode="open"> (note this was recently renamed from shadowroot="open" which the above mentioned polyfill still uses).

Instead of

element.innerHTML

producing

   <custom-element>
      <h2>light content</h2>
    </custom-element>

the new function

element.getInnerHTML({includeShadowRoots: true})

will include the shadowroot

   <custom-element>
      <template shadowrootmode="open">
        <p id="a">shadow a</p>
        <p id="b">shadow b</p>
        <p id="c">shadow c</p>
        <slot></slot>
      </template>
      <h2>light content</h2>
    </custom-element>

[WebReflection]

where would the content of that shadowroot be taken from?

[WebReflection]

also, what happens with mode closed ?

[ttraenkler]

The polyfill I linked in the OP contains code to deal with open and closed shadowroots even though I was not able to use it for patching the elements exposed by linkedom successfully.

where would the content of that shadowroot be taken from?

For open shadowroots simply from the element's this.shadowRoot.

also, what happens with mode closed ?

For closed you pass the closed shadowroots to the getInnerHTML function explicitly as an array. Here is a description from the champion of the proposal that explains it:

"Closed shadow roots: To allow serialization of closed shadow roots, an additional option will be added: const html = element.getInnerHTML({ includeShadowRoots: true, closedRoots: [shadowRoot1,shadowRoot2,...] });
Using this syntax, if any of the closedRoots shadow roots are encountered during serialization, they will be serialized regardless of whether they are open or closed. Closed shadow roots will be serialized using ."
https://github.com/mfreed7/declarative-shadow-dom

Note I found a package called ocean for web components SSR which claims: "Ocean's DOM shim is backed by linkedom, a fast DOM layer. The shim also bridges compatibility with popular web component libraries." Maybe it is a good reference or point for collaboration on the implementation details.

[ttraenkler]

I have discussed getInnerHTML with @mfreed7 the champion of the proposal and it seems it is not yet standardized. The implementation in Chromium is outdated and deprecated but so far without an alternative until there is consensus across vendors. He referenced these issues:

• Add getInnerHTML() that optionally serializes declarative Shadow DOM whatwg/html#8867
• Add declarative Shadow DOM features whatwg/html#5465

Until standardized it is probably better to not add getInnerHTML and instead add a mode configuring wether the custom Node.toString method of linkedom will include shadowroots when serializing the DOM tree to an HTML string.

Since it's unclear what will be standardized it's best to keep it outside of DOM APIs in a custom mode parameter of linkedom. I will come up with a new proposal that is minimally invasive since I think it's a common need for serializing web components that it's better to have this as part of the toolbelt inside of linkedom.

[jackholden]

This would now be just getHTML() instead of getInnerHTML().

Having this implemented would be a very neat addition and improve web component DSD DX.

Element.getHTML({serializableShadowRoots: true})

[WebReflection]

@jackholden please file a new issue and, of course, PR welcomed 👋