-
-
Notifications
You must be signed in to change notification settings - Fork 4.7k
feat: svelte head body separation for nested components in <svelte:head> tag #17324
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
base: main
Are you sure you want to change the base?
Conversation
- Fix server-side rendering (SSR) by creating a capture renderer in the head() function that only pushes head content to the parent renderer, discarding body output - Add collect_sync() public method to Renderer for synchronous content collection - Fix client-side rendering (CSR) by filtering non-head-specific elements after rendering in head blocks, moving body elements (div, span, etc.) to the body while keeping head-specific elements (script, meta, link, style, title, etc.) in the head This ensures that when a component with both <svelte:head> and body content is placed inside a parent <svelte:head>, only the nested component's head content appears in the document head, and body content correctly appears in the document body. Fixes: Components rendering inside svelte:head had body content leaking into head section
…re moved to body if the nested component has any
🦋 Changeset detectedLatest commit: e8f6c10 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
|
Playground with fix |
|
|
||
| block(() => render_fn(anchor), HEAD_EFFECT); | ||
|
|
||
| // After rendering, check if non-head elements were added and move them to body |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I very doubt this logic makes sense. Aside from "Why do you mix head and body elements?", these elements became un-cleanable in case the component/head is wrapped in #if or something else dynamic. And probably breaks other blocks like #each.
Before submitting the PR, please make sure you do the following
feat:,fix:,chore:, ordocs:.packages/svelte/src, add a changeset (npx changeset).Tests and linting
pnpm testand lint the project withpnpm lintthis PR fixes 9163