Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(runtime): revert slot relocation forwarding #5222

Merged

Conversation

tanner-reits
Copy link
Member

What is the current behavior?

Changes made in #4940 and #4993 are causing issues in the Ionic Framework screenshot testing with experimentalSlotFixes enabled. With this behavior, the slot attribute can get removed from elements which is an issue if styles target the attribute (i.e. something like ::slotted([slot="start"])).

Fixes #5215

What is the new behavior?

This commit reverts some logic in the runtime attempting to handle the use case of slots being slotted into other slots where the slot name changes along the way. The Stencil runtime cannot handle this use case elegantly because it relocates the node in the DOM rather than having references to nodes like the native Shadow DOM.

For this use case, it is recommended to either use shadow encapsulation for all components involved, or to keep the slot name consistent through the component tree.

Reverts 21b3bf0, 9adcfab, and part of 0106e0b

Does this introduce a breaking change?

  • Yes
  • No

Not a breaking change since this behavior was being the experimentalSlotFixes flag anyway

Testing

Automated tests are passing and Framework screenshot tests are passing as can be seen in this run of the nightly workflow

Other information

Stencil is not setup to handle this use case with the current slot polyfill logic. This limitation is called out in the Stencil docs: ionic-team/stencil-site#1306

Copy link
Contributor

github-actions bot commented Jan 3, 2024

--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

@tanner-reits tanner-reits marked this pull request as ready for review January 3, 2024 19:56
@tanner-reits tanner-reits requested a review from a team as a code owner January 3, 2024 19:56
Copy link
Contributor

@alicewriteswrongs alicewriteswrongs left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

let's just revert slots entirely, no more slots anywhere ever 👍

@dutscher
Copy link
Contributor

dutscher commented Jan 8, 2024

maybe a unit test like in this commit?
4303d6a#diff-7ac2ac45ec60f7bfdb3329273c9d1ce24b0b508e62ef72623876b84521c611c1

cheers and thanks for your effort

if (childNode.nodeType === NODE_TYPE.ElementNode && !!childNode['s-sn']) {
childNode.setAttribute('slot', childNode['s-sn']);
}

// Need to tell the render pipeline to check to relocate slot content again
checkSlotRelocate = true;
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I can't comment on the line itself, but do we still need this if statement, also introduced in #4993?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yep that can go too. Good call. Merged into commit d2ab331

This commit reverts some logic in the runtime attempting to handle the use case of slots being slotted into other slots where the slot name changes along the way. The Stencil runtime cannot handle this use case elegantly because it relocates the node in the DOM rather than having references to nodes like the native Shadow DOM.

For this use case, it is recommended to either use shadow encapsulation for all components involved, or to keep the slot name consistent through the component tree.

Reverts 21b3bf0, 9adcfab, and part of 0106e0b

Fixes #5215
@tanner-reits tanner-reits force-pushed the treits/fix/slot-regressions/revert-slot-name-forwarding branch from 7dac2c6 to d2ab331 Compare January 8, 2024 15:52
@tanner-reits tanner-reits added this pull request to the merge queue Jan 12, 2024
Merged via the queue into main with commit a2e119d Jan 12, 2024
120 checks passed
@tanner-reits tanner-reits deleted the treits/fix/slot-regressions/revert-slot-name-forwarding branch January 12, 2024 14:57
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

bug: Slot Attribute is lost
5 participants