feat(runtime): add extras flag for scoped slot changes

[tanner-reits]

What is the current behavior?

We made changes in #5146 and #5135 to alter the behavior of slots inside scoped components. The changes aligned Stencil's slot polyfill with behavior in the native shadow DOM and were placed behind the experimentalSlotFixes extra flag in a project's Stencil config. However, these changes negatively impacted the Ionic Framework causing automated tests to fail.

GitHub Issue Number: N/A

What is the new behavior?

This commit adds a new extras flag, experimentalScopedSlotChanges, that is used to change logic in a few places to align Stencil's scoped encapsulation to work more like the native Shadow DOM when using slots.

Changes in #5146 and #5135 are changed from being gated by the experimentalSlotFixes flag to this new flag so they can be toggled independently.

Does this introduce a breaking change?

• Yes
• No

This will be considered a breaking change once we remove the ability to opt-in/opt-out

Testing

Manual tests
Changes can be tested by enabling experimentalScopedSlotChanges in a starter project's Stencil config and following the test cases from either #5146 and/or #5135

Automated tests
Stencil unit and e2e tests continue to pass (with the new flag enabled). Ionic Framework screenshot tests pass with the flag disabled (expected).

Other information

We'll need to coordinate with the Framework team to update their components before we can enable this flag by default (and eventually remove it altogether).

Related doc changes: stenciljs/site#1307

[github-actions]

--strictNullChecks error report

Typechecking with --strictNullChecks resulted in 1233 errors on this branch.

That's the same number of errors on main, so at least we're not creating new ones!

reports and statistics

Our most error-prone files

Path	Error Count
src/dev-server/index.ts	37
src/mock-doc/serialize-node.ts	36
src/dev-server/server-process.ts	32
src/compiler/prerender/prerender-main.ts	22
src/testing/puppeteer/puppeteer-element.ts	22
src/runtime/client-hydrate.ts	20
src/screenshot/connector-base.ts	19
src/runtime/vdom/vdom-render.ts	18
src/compiler/config/test/validate-paths.spec.ts	16
src/dev-server/request-handler.ts	15
src/compiler/prerender/prerender-optimize.ts	14
src/compiler/sys/stencil-sys.ts	14
src/compiler/transpile/transpile-module.ts	14
src/runtime/vdom/vdom-annotations.ts	14
src/sys/node/node-sys.ts	14
src/compiler/prerender/prerender-queue.ts	13
src/compiler/sys/in-memory-fs.ts	13
src/runtime/connected-callback.ts	13
src/runtime/set-value.ts	13
src/compiler/output-targets/output-www.ts	12

Our most common errors

Typescript Error Code	Count
TS2345	369
TS2322	366
TS18048	237
TS18047	103
TS2722	37
TS2532	26
TS2531	23
TS2454	14
TS2352	12
TS2790	11
TS2769	8
TS2538	8
TS2344	6
TS2416	6
TS2493	3
TS18046	2
TS2684	1
TS2430	1

Unused exports report

There are 14 unused exports on this PR. That's the same number of errors on main, so at least we're not creating new ones!

Unused exports

File	Line	Identifier
src/runtime/bootstrap-lazy.ts	21	setNonce
src/screenshot/screenshot-fs.ts	18	readScreenshotData
src/testing/testing-utils.ts	198	withSilentWarn
src/utils/index.ts	145	CUSTOM
src/utils/index.ts	269	normalize
src/utils/index.ts	7	escapeRegExpSpecialCharacters
src/compiler/app-core/app-data.ts	25	BUILD
src/compiler/app-core/app-data.ts	115	Env
src/compiler/app-core/app-data.ts	117	NAMESPACE
src/compiler/fs-watch/fs-watch-rebuild.ts	123	updateCacheFromRebuild
src/compiler/types/validate-primary-package-output-target.ts	61	satisfies
src/compiler/types/validate-primary-package-output-target.ts	61	Record
src/testing/puppeteer/puppeteer-declarations.ts	485	WaitForEventOptions
src/compiler/sys/fetch/write-fetch-success.ts	7	writeFetchSuccessSync

[christian-bromann]

👍