fix(runtime): create unique host ids

[christian-bromann]

What is the current behavior?

When hydrating components in e.g. Next.js we usually never hydrate the whole application at once and instead each individual component on its own. For example given the following example:

<cmp-a class="hydrated" s-id="1">
  <!--r.1-->
  <cmp-b class="hydrated" c-id="1.0.0.0" s-id="2">
    <!--r.2-->
    <header c-id="2.0.0.0"></header>
    <!--s.2.1.0.1.-->
  </cmp-b>
</cmp-a>

Our SSR logic for React and Next.js that is responsible for server side rendering the component would be first called on the <cmp-a /> element. As many components introspect their light dom for rendering, what we are trying to do is to resolve the light dom as part of the process. At this point we would get the correct assignment of host ids as seen above.

However, Next.js then goes through each individual component again to render it in a new context. It then replaces the result of that rendering with the previous generated code, ultimately responding the following to the server:

<cmp-a class="hydrated" s-id="1">
  <!--r.1-->
  <cmp-b class="hydrated" s-id="1">
    <!--r.1-->
    <header c-id="1.0.0.0"></header>
    <!--s.1.1.0.1.-->
  </cmp-b>
</cmp-a>

This particularly happens if you have components with ShadowRoots within the Light Dom of another component with ShadowRoot.

What is the new behavior?

For all hydration functions Stencil provides, e.g. hydrateDocument, renderToString, serializeDocumentToString and streamToString, we attach a unique docData object to the document that allows us to continue the host id count throughout multiple hydration calls.

Documentation

Does this introduce a breaking change?

• Yes
• No

Testing

n/a

Other information

n/a

[tanner-reits]

Think this makes sense!