shadow DOM slots

Shadow DOM supports <slot> elements, that are filled by the content from light DOM.

browser ⟩ web components ⟩ implement ⟩ shadow DOM ⟩ slots

⭐️ 重點

• if those descendants include a <slot> element, then the regular light DOM children of the host element are displayed as if they were children of that <slot>(they do not actually become part of the shadow DOM), replacing any shadow DOM content in the slot.

• if shadow DOM does not include a <slot>, then any light DOM content of the host is never displayed.

• if shadow DOM has a <slot>, but the shadow host has no light DOM children, then the shadow DOM content of the slot is displayed as a default.

if shadow DOM defines more than one and names those slots with a name attribute, then children of the shadow host can specify which slot they would like to appear in by specifying a slot="slotname" attribute.

📗 參考

• JS.info ⟩ Shadow DOM slots, composition

• Google ⟩

  • The <slot> element

  • Working with slots in JS

📘 手冊

• The <slot> element

• Working with <slot> in JS

👥 相關

• light, shadow, flattened DOM

💈 範例

• <custom-menu>

• <user-card>

• 💾 named <slot>

Fallback Content

• if we put something inside <slot>(in shadow DOM), it becomes the fallback content, browser shows it if there’s no corresponding element in light DOM. 👉 See tab 2️⃣ below.

Default Slot

• The first unnamed <slot> in shadow DOM is a “default slot". It gets all nodes from the light DOM that aren’t slotted elsewhere. 👉 See tab 1️⃣ below.

Code Example

light DOM

<user-card>
  <!-- ⭐️ light DOM: slotted elements -->
  <!-- ⭐️ only top-level children may have [slot="…"] attribute❗️ -->
  <span slot="username">John Smith</span>
  <span slot="birthday">2001.01.01</span>
</user-card>

shadow DOM

class UserCard extends HTMLElement {

    // connected to document
    connectedCallback() {
        
        // attach shadow root
        const root = this.attachShadow({mode: 'open'});

        // ⭐️ named slots in shadow dom tree
        root.innerHTML = `
            <style>
                ::slotted(*) {
                    border: 1px solid black;
                    padding: 0 4px;
                    display: inline-block;
                    margin: 2px auto;
                    background-color: hsla(60, 80%, 50%, 0.4);
                }
                ::slotted(:hover) {
                    background-color: hsla(90, 80%, 50%, 0.8);
                }
            </style>
            
            <div>Name:
                <slot name="username"></slot>
            </div>
            <div>Birthday:
                <slot name="birthday"></slot>
            </div>
        `;
    }
}

customElements.define('user-card', UserCard);

flattened DOM

<user-card>
  #shadow-root
    <div>Name:
      <slot name="username">
        <!-- ⭐️ slotted element is inserted into the slot -->
        <span slot="username">John Smith</span>
      </slot>
    </div>
    <div>Birthday:
      <slot name="birthday">
        <span slot="birthday">01.01.2001</span>
      </slot>
    </div>
</user-card>

1️⃣

<script>
customElements.define('user-card', class extends HTMLElement {
  connectedCallback() {
  
    this.attachShadow({mode: 'open'});
    
    // ⭐️ shadow DOM:v2 named slots and 1 default slot
    this.shadowRoot.innerHTML = `
      <div>Name:
        <slot name="username"></slot>
      </div>
      <div>Birthday:
        <slot name="birthday"></slot>
      </div>
      <fieldset>
        <legend>Other information</legend>
        <slot></slot> <!-- ⭐️ default slot -->
      </fieldset>
    `;
  }
  
});
</script>

<user-card>

    <!-- ⭐️ light DOM -->
    
    <!-- ⭐️ elements with [slot="..."] go to named <slot>  -->
    <span slot="username">John Smith</span>
    <span slot="birthday">01.01.2001</span>
    
    <!-- ⭐️ other elements go to default slot -->
    <div>I like to swim.</div>
    <div>...And play volleyball too!</div>
    
</user-card>

2️⃣

<div>Name:
  <slot name="username">
    <!-- ⭐️ fallback content -->
    Anonymous
  </slot>
</div>

📗 參考

Named Slots

• for each<slot name="X"> in shadow DOM, the browser looks for[slot="X"] in the light DOM and insert it into the slot, the result is called flattened DOM. 👉 See code in "shadow DOM", "flattened DOM" tabs above.

• if there are multiple elements in light DOM with the same[slot="X"], they are appended into the same<slot name="X"> (in shadow DOM), one after another.

Flattened DOM

the flattened DOM exists only for rendering and event-handling purposes. It’s kind of “virtual”. That’s how things are shown. But the nodes in the document are actually not moved around! 👉 See "flattened DOM" tab above.

The process of rendering slotted elements inside their slots is called “composition”.