Treat layout pages like components when using named slots
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 20.8k
- Forks
- 2.3k
- Avg merge
- 1d 16h
- Merged PRs (30d)
- 156
Description
Let's say I have a _layout.svelte like the following:
<slot name="layout-pre"></slot>
<div id="intermediate">Some other intermediate stuff.</div>
<slot></slot>
And now I have a child view (let's call it homepage.svelte which inherits that layout, which puts some stuff into the named slot, and the rest into the default slot:
<h1 slot="layout-pre">This should come before #intermediate.</h1>
<!-- When rendered, the div from above should get inserted here from the layout:
<div id="intermediate">Some other intermediate stuff.</div>
-->
<main>Since this doesn't use a named slot, it'll just get inserted into the unnamed slot above.</main>
Right now this is not allowed, and the following error is thrown: Element with a slot='...' attribute must be a descendant of a component or custom element. Are there technical or usage reasons why we wouldn't want to treat a layout like any other component with respect to slots?
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reproducing the slot behavior with the shown _layout.svelte and homepage.svelte examples, then inspect how SvelteKit validates slot attributes for layout pages. Done means named content from the child page can render in the layout-pre slot while default content remains in the unnamed slot, without the reported error.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend, web-dev
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100