fix(SSR): patch scoped: true SSR-ed, slotted nodes next/prev sibling accessors

[johnjenkins]

What is the current behavior?

Stencil scoped: true components don't do enough work to hide their internals from the browser. This can cause hydration errors when using SSR via meta-frameworks (nuxt, next etc).

GitHub Issue Number:
Fixes #6056

What is the new behavior?

As well as childNodes, children & childElementCount being patched via experimentalSlotFixes (or slotChildNodesFix), firstChild and lastChild accessors are now patched too; only returning slotted nodes.

Additionally, SSR slotted node accessors nextSibling, nextSiblingElement, previousSibling. previousSiblingElement are also patched, only returning 'lightDOM' nodes.

Documentation

Does this introduce a breaking change?

• Yes
• No

Testing

• New unit tests
• New wdio tests

Other information

Meta-frameworks (during SSR hydration) reconcile their DOM to check for rendering errors.

Typically this involves stepping over each node in the real DOM and comparing it with the expected output from the framework's VDOM.

When mis-matches are found, the existing SSR rendered nodes are removed and the client-side rendered nodes inserted instead, causing more work for the client runtime, a longer TTI and in Stencil's case, components that are broken.

This is an excerpt from Vue's hydration script:

[christian-bromann]

Changes LGTM 👍

Once all checks are ✅ I can go ahead and merge