🔸slotted nodes

a.k.a distributed nodes.

web ⟩ component ⟩ slot ⟩ slotted nodes

任何在自訂 web component 標籤(如：<my-component>)之間的直接子元素(direct child)，包含文字(text node)，都是 slotted nodes，例如：

<my-component>
  <!-- ⭐️ slotted nodes -->
  <!-- ⭐️ 沒有指定 slot -->
  <p>This is a slotted node.</p>
  <!-- ⭐️ 指定 slot="username" -->
  <div slot="username"><span>John Smith</span></div>
</my-component>

👥 相關

• <slot>

• named slot

• Styling in Shadow DOM ⟩ ::slotted()

• Use CSS Variables

📗 參考

📘 手冊

• Nodes (in light DOM) that can be inserted into <slot> are known as slottable nodes; when a node has been inserted in a <slot>, it is said to be slotted.

• An unnamed <slot> will be filled with all of the custom element's top-level child nodes that do not have the slot attribute. This includes text nodes. 📘 Using templates and slots

• Only custom element's top-level children (in the light DOM) may have [slot] attribute❗️ 👉 See "light DOM" tab in example code in Using Slots.

• ::slotted() only select slotted element itself, not its descendants (content)❗️

Slotted Contents

• slotted content come from light DOM, they use document styles❗️

• shadow DOM styles do not affect slotted content❗️

• ::slotted() only select slotted element itself, not its descendants (content)❗️

• ::slotted() can't go inside light DOM, for example: ::slotted(div) p is invalid❗️

• ::slotted() can't be used in .querySelector()❗️

👉 Styling in Shadow DOM

在下面的範例碼中，我們分別在外部及內部 CSS 對 <span> 元素做「粗體」與「紅色」格式設定，對於插入 shadow DOM<slot> 的 <span> 而言，只有外部的「粗體」設定有效 (👉 see: "codepen" tab below)。 💾 replit

html

<!-- ⭐️ document (outer) styles -->
<style>
  span {
    font-weight: bold
  }
</style>

<!-- ⭐️ custom element -->
<user-card>
  <!-- ⭐️ slotted element -->
  <div slot="username">
    <!--  
      ⭐️ slotted content is affected by document (outer) styles,
         not by local (shadow DOM) styles❗️  
    -->
    <span>John Smith</span>
  </div>
</user-card>

<script>
  customElements.define('user-card', class extends HTMLElement {
    connectedCallback() {
      this.attachShadow({mode: 'open'});
      
      // ⭐️ shadow tree (with named <slot>)
      // 1. slotted elements come from light DOM, they use document styles. 
      // 2. local styles do not affect slotted content.
      this.shadowRoot.innerHTML = `
        <style>
          span { background: red; }
        </style>
        Name: <slot name="username"></slot>
      `;
    }
  });
</script>

codepen

Styling Slotted Content

💾 ::slotted() lab

• use document (outer) styles (in light DOM).

• style <slot> (in shadow DOM) and rely on CSS inheritance.

• use ::slotted(«selector») in shadow DOM.

• ⭐️ use CSS variables: CSS variables exist on all levels, both in light and shadow. 👉 CSS hooks with custom properties

codepen

::slotted() lab

css var demo