Suggestion: create a block syntax for passing unwrapped children to a slot

[CreaturesInUnitards]

Scenario:

Our component is an opinionated structure.

<!-- MyComponent -->
<header>
  <slot name="head"></slot>
</header>
<main>
  <slot name="main"></slot>
</main >
<footer>
  <slot name="foot"></slot>
</footer >

We want to pass in the children to each slot without further wrapping. Current API enables this:

<MyComponent>
  <h1 slot="head">Heading</h1>
  <button slot="head">log out</button>
  <h2 slot="main">Headline for the news!</h2>
  <p slot="main">A paragraph of news</p>
  [ ... ]
</MyComponent>

Authors may use whatever html-friendly method they choose to visually express their intent, but it's easy to see how this can make for an ugly dev experience. In cases with a lot of children to pass to a single slot, we're asked to choose between an otherwise unnecessary additional wrapper, or including slot=foo on every child.

Proposal:

{#slot target="head"}
  <h1>Heading</h1>
  <button>log out</button>  
{/slot}

[mrkishi]

This is a duplicate of #2080. There certainly seems to be interest!

[CreaturesInUnitards]

Ah. My search was too naive, apparently. Should I close?

[steve-taylor]

Should I close?

I think so. #2080 covers this quite well.

[CreaturesInUnitards]

Closing as a duplicate of #2080.