CSS 伪元素

描述

CSS 中的 ::part() 伪元素用于表示 shadow 树，具有匹配的部分属性；即 ::part() 伪元素的作用类似于函数，并将部件作为参数。

part 属性是一个全局属性，表示元素的部件名称的空格分隔列表。这些部分名称允许使用 ::part() 伪元素选择影子树的特定元素并设置其样式。

语法

selector::part(+) {
    /* ... */
}

CSS ::part() 示例

这是 ::part() 伪元素的示例。在此示例中:

  • 使用 JavaScript (new-widget) 创建模板。

  • 声明一个模板的一部分作为小部件。

  • 将"widget"作为参数传递给 ::part() 伪元素，其中指定了 CSS 样式。

  • 由于部件（小部件）包含 <p> 标签，因此 CSS 样式将应用于此 <p> 标签。

<html> 
<head>
<style>
   .container {
      max-width: 500px;
      margin: 0 auto;
      padding: 2em;
   }

   body {
      font: 1em/1.618 Segoe UI, sans-serif;
   }

   new-widget::part(widget) {
      max-width: 300px;
      padding: 1em;
      background-color: lightgoldenrodyellow;
      border-radius: 20%;
   }
</style>
</head>
<body>
   <div class="container">
      <p>该段落正常渲染，没有任何样式。</p>
      <template id="new-widget">
         <div part="widget">
         <p>该段落呈现为主段落的一部分，因此此处应用 ::part() 伪元素。</p>
         </div>
         </template>
      <new-widget></new-widget>
      <script>
         let template = document.querySelector("#new-widget");
         globalThis.customElements.define(
         template.id,
         class extends HTMLElement {
         constructor() {
         super()
         .attachShadow({ mode: "open" })
         .append(template.content);
         }
         }
         );
      </script>       
   </div>
</body>
</html>