Part of #2867

Context

Current SSR rendering logic adds defer-hydration attribute for nested custom elements so they won't hydrate before the parent custom element does.

While working on the ssr fixture test utility, I noticed that when server side rendered component was loaded to a browser that already has the custom element definition loaded, the content gets duplicated as the browser fills the content of the shadowroot from the declarative shadowroot and the component also gets rendered from the component definition.

To prevent this, we want to make sure lit/experimental-hydrate-support.js is always loaded first, which will make sure custom elements are hydrated, rather than rendered, if it already has a shadowroot due to being ssred.

However, if we want to provide an option for users of the ssr fixture utility to be able to test components that have not been hydrated yet, we need an option to support that.

Solution

Adding an option for render in ssr's render-lit-html.ts to also add the defer-hydration attribute to top level custom element seems like an effective way to prevent hydration of custom elements.