Skip to content
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

Slot let variables not accessible on slotted element root #4173

Closed
Crisfole opened this issue Dec 27, 2019 · 2 comments · Fixed by #4266
Closed

Slot let variables not accessible on slotted element root #4173

Crisfole opened this issue Dec 27, 2019 · 2 comments · Fixed by #4266

Comments

@Crisfole
Copy link
Contributor

Crisfole commented Dec 27, 2019

In the following abbreviated components I'd expect to have access to foo in the h1 class attribute. But instead it's only accessible inside the slotted element content.

Parent

<Child {baz}>
  Content
  <h1 slot=foobar let:foo class='foobar-{foo.type}'>{foo.title}!</h1>
  <!--  Unexpected behaviour is here - - ^            ^- - - This works fine -->
</Child>

Child

<section class=child>
  <slot name=foobar foo={makeFoo(baz)} />
  {@html baz.content}
</Child>

I'd like the above example to work, with slot let variables in scope at the root slotted element

Alternatives to this include:

  • Wrapping in a dummy element. (Yuck)
  • bind:this and manually setting the attributes I want later. (Ulcer inducing)

This is pretty important for slotting tables: if you can't use data from the dataset to add attributes to slotted rows or cells you're missing something pretty darn important...

@Crisfole
Copy link
Contributor Author

Crisfole commented Jan 2, 2020

OK, apparently you can get variables exposed by named slots on the component itself:

Child

<script> export let items; </script>
<ul>
  {#each items as { id, name, type } (id)}
  <slot name=li {name} {type}/>
  {/each}
</ul>

Parent

<script>
  import Child from './Child.svelte';
  let items = [
    { id: 'abc', type: 'issue', text: "can't see well" },
    { id: 'def', type: 'propsal', text: "outsource the work" },
    { id: 'ghi', type: 'issue', text: "stuck in traffic" },
  ];
</script>

<Child {items} let:type>
  <li slot=li let:text class={type}>{text}</li>
</Child>

That's pretty counter intuitive to me...but it works. Is this deliberate? Can we document this better if so? Can we tighten up the constraints a bit?

@Conduitry
Copy link
Member

Should be fixed in 3.17.2.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants