refactor: use fragments for slots in light DOM (BREAKING CHANGE)

[nolanlawson]

Details

Same as #3308, but uses API versioning. This is still a breaking change (for off-core consumers).

Does this pull request introduce a breaking change?

• 🚨 Yes, it does introduce a breaking change.

Off-core consumers, or those bumping their component's metadata apiVersion to 60+, will see additional empty text nodes rendered in light DOM slots. This can change use cases like the following:

renderedCallback() {
  const myExpectedChildNode = this.childNodes[0];
}

In API versions <60, the above this.childNodes[0] would resolve to the first slotted element in the light DOM component.

In API versions >=60, it will be an empty text node. This is due to the new system using VFragments to enclose light DOM slots, which means there is an additional empty text node before and after the slot.

Affected APIs are:

• childNodes
• firstChildNode
• lastChildNode

Component authors are encouraged to use lwc:ref or this.querySelector rather than relying on the exact makeup of child nodes. Using children/firstChild/lastChild will also work, since text nodes are not elements (simply nodes).

Additionally, Jest snapshots will change to have additional whitespace, unless you have upgraded to lwc-test v13.0.0+.

Does this pull request introduce an observable change?

• ⚠️ Yes, it does include an observable change.

See above.

GUS work item

W-13818735

[nolanlawson]

We're breaking downstreams, need salesforce/lwc-test#205 to be released first

[nolanlawson]

/nucleus test

[nolanlawson]

/nucleus test

[nolanlawson]

/nucleus ignore --reason 'downstream webruntime test has SSR snapshot with duplicate style that apparently this PR fixes'