CSS 伪元素

::slotted() 伪元素表示具有 slot 属性的元素。与 ::part() 伪元素不同，::slotted() 伪元素仍然封装在 Web 组件的 <template> 中的 <style> 元素中。

此伪元素仅在放置在影子 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">标题位于此处</slot></h2>
         <slot name="p-text">内容在此处</slot>
         <slot name="footer-text">页脚在此处</slot>
      </div>
   </template>

   <sample-card>
      <span class="heading" slot="heading">::Slotted 例子</span>
      <p class="p-text" slot="p-text">段落文本</p>
      <p id="footer-text" slot="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>