# Slot implementation research

### HTML template slots

https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_templates_and_slots

A template with slot placeholders for `element-name`, `description`, and `attributes`

<template id="element-details-template">
  <details>
    <summary>
      <span>
        <code class="name">&lt;<slot name="element-name">NEED NAME</slot>&gt;</code>
        <i class="desc"><slot name="description">NEED DESCRIPTION</slot></i>
      </span>
    </summary>
    <div class="attributes">
      <h4><span>Attributes</span></h4>
      <slot name="attributes"><p>None</p></slot>
    </div>
  </details>
  <hr>
</template>

A component using this template would be rendered with children, some of them targetting these slots:

<element-details>
  <span slot="element-name">template</span>
  <span slot="description">A mechanism for holding client-
    side content that is not to be rendered when a page is
    loaded but may subsequently be instantiated during
    runtime using JavaScript.</span>
</element-details> 

Slots in html templates act as a replacement. There is no container which manages the slot; there is only children rendered in a particular place.

Pros:

* Template owns location of slots
* Great balance between prescription and customization

Cons:
* Templates don't seem to have conditional
*
Unclear how to conditionalize
This means that if you need to position a slot, you will have a hard time removing containing elements if the slot is unused:

<button>
  { icon && <slot name="icon"}

## React implementations

### Spectrum slots

### Material UI slots

### Base UI slots

### Ant.d slots