Repository navigation
Conversation
Adds a `my-card` example component with named slots and a `named-slot-shadow` scenario to the shared React test scenarios. It passes a scoped and a declarative shadow DOM Stencil component, and a plain element, to the slots of `my-card` and asserts where the browser assigns them, both in the server rendered markup and after hydration. The scenario fails in the Next.js example project, which uses the `@stencil/ssr` compiler, until the follow up commit forwards the `slot` prop to the component wrapper.
The transform renders every component inside a `<div style="display: contents">` and only spreads the props onto the component itself. A browser only assigns the direct children of a shadow host to a slot, so a component passed to a named slot of another component was assigned to the default slot through its wrapper, and the named slot stayed empty. Set the `slot` prop on the wrapper as well, in all three wrapper templates. It stays on the component, as other code may look it up there. Fixes stenciljs#858
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Pull request checklist
npm run build) was run locally for affected output targetsnpm test) were run locally and passednpm run prettier) was run locally and passedPull request type
What is the current behavior?
@stencil/ssrrenders every component inside a<div style="display: contents">wrapper and only spreads the component's props onto the inner element. A browser only assigns the direct children of a shadow host to a slot, so a Stencil component passed to a named slot of another component is assigned to the default slot through its wrapper, and the named slot stays empty. Plain elements are not wrapped, so they work.Issue URL: #858
Fixes #858
What is the new behavior?
slotprop is also set on the wrapper element, in all three wrapper templates (serializeScopedComponentand the two inserializeShadowComponent). It is kept on the component as well, as other code may look it up there.my-cardexample component with named slots and anamed-slot-shadowscenario to the shared React test scenarios. It passes a scoped component, a declarative shadow DOM component and a plain element to the slots ofmy-card, and asserts where the browser assigns them, in the server rendered HTML and after hydration.slot, forscopedanddeclarative-shadow-domwith both strategies. Thescopedsnapshot is updated: 8 lines, each only gains, slot: props.slot.Does this introduce a breaking change?
Other information
The first commit adds the scenario and fails in
next-appon purpose, the second commit fixes it.Results of the new scenario, without and with the fix:
next-app(Next 14, compiler)react-app(Vite)remix-appnext-15-runtime-basedOn Vite and Remix only the server rendered HTML is wrong, because a component serialized as
scopedis wrapped in both strategies and the client render does not add the wrapper. On Next the wrapper is also rendered by the client, so it stays wrong after hydration.I also checked the repro from the issue with the same change applied to its installed
@stencil/ssr@0.4.0.startgoes fromspantodiv, span(thedivwrapsexample-input), and the default slot goes fromdiv, ptop.I ran the unit tests of all output targets and the e2e suites of
next-app,next-15-runtime-based,remix-appandreact-app. I did not run the Vue, Nuxt and Angular e2e suites.The
keyprops in the scenario are there because React warns about missing keys for the children passed to the generated wrapper, which fails the shared "no errors were logged" check. That warning is unrelated to this change and also happens without it.