feat(slot-polyfill): patch insertBefore & slotted node parentNode

[johnjenkins]

What is the current behavior?

Frameworks insert nodes into and remove nodes from Stencil components.

When shadow: false a method like stencilCmp.insertBefore(newNode, anotherSlottedNode) will either fail (because anotherSlottedNode is not a direct descendent of stencilCmp) or be incorrect (stencilCmp.insertBefore(newNode, null) will just insert a node into the start of the component which is not where the original <slot /> is)

Additionally, when deciding where to insert a node, a framework will simply do currentNode.parentNode < and insert a newNode before it.
This again, can be incorrect; if currentNode.parentNode has slot="header" but the incoming newNode has slot="footer" then newNode will be inserted into the wrong position.

GitHub Issue Number:

Closes #6043

What is the new behavior?

// stencil.config.ts
...
extras: {
  experimentalSlotFixes: true
}

Will now also patch a polyfilled Stencil component's .insertBefore() method and any slotted node's .parentNode accessor.

Any direct call to insertBefore on a component now appropriatly slots the incoming node.

Any call to a current slotted node's parentNode will return the Stencil component host.

Documentation

Does this introduce a breaking change?

• Yes
• No

Testing

• New unit tests
• New component tests

Other information

As per precedent, __insertBefore on the component and __parentNode on the slotted node, provides access to the original, unpatched method / accessor.

[christian-bromann]

LGTM 👍

[christian-bromann]

Will merge this once the build is 🟢 again