Programmic slot access/api

[RedHatter]

This PR implements an alternative approach to consuming slots through the use of a new $$slots variable. The need for something like this has been brought up several times see #2106 and to a lesser extent #4036 there's a few more related issues scattered around.

$$slots

$$slots is an object keyed by slot name containing slot constructors of the form slot_name(ctx?: Object, callback?: Function).

Parameters

ctx is an optional parameter to set the inital context of the slot. Equivalent to passing props to a <slot /> node.

callback is also optional. It's a callback function that will be called when slot content changes.

Return value

The constructor returns an object of the form

{
  content: Array<HTMLElement|TextNode|Component>,
  mount: Function(target: HTMLElement, anchor?: HTMLElement),
  update: Function(props: Object),
  destroy: Function
}

content is an array containing the top level nodes. Some more work is needed to support if, each, and await blocks.

The mount function can be called to insert the slot content into the DOM. Note that this isn't required, you could do whatever you want with the content.

You can call update to modify the context you initially passed in. This is similar to Component.$set.

The destroy function removes the content from the dom.

Examples

Setting a textarea from slot content.

<script>
  export let value = $$slots.default().content[0].data
</script>

<textarea bind:value></textarea>

A react style portal component.

<script>
  import { onDestroy } from 'svelte'

  const slot =  $$slots.default()
  slot.mount(document.body)
  onDestroy(slot.destroy)
</script>

A nav element that sets the active class on child ancher elements.

<script>
  export let path

  $: {
    if (target) {
      const slot = $$slots.default()
      slot.content.forEach(n =>
        n.tagName == 'A'
        && n.getAttribute('href') == path
        && n.classList.add('active')
      )
      slot.mount(target)
    }
  }
</script>
<nav bind:this={target} />

[isaacHagoel]

Hi, are there plans to merge this any time soon? could be pretty great to have!

[stale]

This pull request has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[dummdidumm]

This is severly outdated, and I'm not sure we would want such an API. The given examples are probably better solved through some kind of portal construct which is more generally usable. Therefore closing this.