CSS - 偽元素 - ::slotted()

::slotted() 偽元素表示具有 slot 屬性的元素。與 ::part() 偽元素不同，::slotted() 偽元素仍然封裝在 Web 元件的 <template> 中的 <style> 元素中。

此偽元素僅在 shadow DOM 內部的 CSS 中使用時才有效。

語法

selector::slotted(<compound-selector>) {
    /* ... */
}

CSS ::slotted 示例

這是一個 ::slotted() 偽元素的示例。在此示例中

模板正在使用三個插槽。
定義了一個自定義元素“sample-card”。
CSS 樣式已新增到 <template> 內的 <style> 塊中。
插槽需要首先宣告，使用類名或 ID。
宣告的插槽稍後在 html 程式碼中使用類名或 ID 呼叫。
如果類名或 ID 識別符號與宣告的不匹配，則會呈現插槽的描述。

嘗試更改類名或 ID 或樣式，並檢視更改後的效果。

<html>
<head>
</head>
<body>
   <template id="sample-template">
      <style>
         ::slotted(.p-text) {
            background-color: lavender;
         }

         h2::slotted(.heading) {
            background: silver;
         }

         ::slotted(#footer-text) {
            background-color: lightsteelblue;
            border: 2px solid black;
         }
      </style>
      <div>
         <h2><slot name="heading">title goes here</slot></h2>
         <slot name="p-text">content goes here</slot>
         <slot name="footer-text">Footer here</slot>
      </div>
   </template>

   <sample-card>
      <span class="heading" slot="heading">::Slotted Example</span>
      <p class="p-text" slot="p-text">Paragraph text</p>
      <p id="footer-text" slot="footer-text">Footer text</p>
   </sample-card>

   <script>
      customElements.define(
         'sample-card',
         class extends HTMLElement {
         constructor() {
         super();

         const template = document.getElementById('sample-template');
         const shadow = this.attachShadow({ mode: 'open' });
         shadow.appendChild(template.content.cloneNode(true));

         const elementStyle = document.createElement('style');
         elementStyle.textContent = `
         div {
         width: 250px;
         border: 5px inset green;
         border-radius: 2px;
         padding: 5px;
         }`;
         shadow.appendChild(elementStyle);

         const cssTab = document.querySelector('#css-output');
         const editorStyle = document.createElement('style');
         editorStyle.textContent = cssTab.textContent;
         shadow.appendChild(editorStyle);
         cssTab.addEventListener('change', () => {
         editorStyle.textContent = cssTab.textContent;
         });
         }
      },
      );
   </script>
</body>
</html>

列印頁面