question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Allow slot='...' attribute on single top level element

See original GitHub issue

Is your feature request related to a problem? Please describe. I am working on a Component Library for myself. I would like to use the slot='...' attribute in a component without being a child of the component. Currently i get the following error:

Element with a slot='...' attribute must be a child of a component or a descendant of a custom element

REPL: https://svelte.dev/repl/9fbd3ef30184481a9edae5dbde4e574b?version=3.35.0

Currently i have to use the slot name on the Component itself like this:

<Navbar>
	...
	<NavItem>
		<NavIcon slot="icon">Icon 1</NavIcon>
		<NavLabel slot="label">Label</NavLabel>
	</NavItem>
	...
</Navbar>

This feels somewhat redundant.

Describe the solution you’d like I would like to be able to directly insert the children without the slot name, because the child itself knows the slot name:

<Navbar>
	...
	<!-- I would like to use it like this, where the Component itself knows the slot -->
	<NavItem>
		<NavIcon>Icon 3</NavIcon>
		<NavLabel>Label 3</NavLabel>
	</NavItem>
	...
</Navbar>

and in NavIcon.svelte:

<div slot="icon">
	<slot />
</div>

Technically the component is a child of a component or a descendant of a custom element, If the slot='...' attribute is restricted to be a single top level element of a component.

How important is this feature to you? Nice to have.

Issue Analytics

  • State:open
  • Created 3 years ago
  • Reactions:5
  • Comments:11 (1 by maintainers)

github_iconTop GitHub Comments

1reaction
vospascalcommented, Jul 3, 2021

you can just do slot … https://svelte.dev/repl/8529d01291644a878ff2136660c88132?version=3.38.3 like this? else you might have to do something like this. the other examples dont work any more but they where a awkward

{#if $$slots.icon} <slot /> {/if}

0reactions
brgrzcommented, Aug 18, 2021

The point of @vospascal solution is to have minimal components which only contain the default slot and no named slots and then you compose those minimal components using the component tag names removing the need for the slot attribute. Just as he shows in REPL. I’m actually using the same idea in a project of mine atm.

One issue I do see with this solution is that components have to be provided in the correct order (since there is only one big default slot) unless you use somekind of flex/grid layout within the composing component to enable ordering/placement.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Using templates and slots - Web Components | MDN
Slots are identified by their name attribute, and allow you to define placeholders in your template that can be filled with any markup...
Read more >
Shadow DOM slots, composition
Let's see how slots work on a simple example. ... In the shadow DOM, <slot name="X"> defines an “insertion point”, a place where...
Read more >
slot selector limit in web component - shadow dom
You are only allowed to change CSS rules for the top level elements inside the slot. And you are even limited to what...
Read more >
Element: <oj-bind-slot> - Oracle
An oj-bind-slot element with a name attribute whose value is not the empty string is referred to as a named slot. A slot...
Read more >
Slots - Vue.js
When a component accepts both a default slot and named slots, all top-level non- <template> nodes are implicitly treated as content for the...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found