CSS - 偽元素 - ::part()

描述

CSS 中的::part()偽元素用於表示在具有匹配 part 屬性的影子樹中的元素；也就是說，::part()偽元素充當函式，並以part作為引數。

part屬性是一個全域性屬性，它表示元素的 part 名稱的空格分隔列表。這些 part 名稱允許使用::part()偽元素選擇和設定影子樹中特定元素的樣式。

語法

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

CSS ::part() 示例

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

使用 JavaScript (new-widget) 建立了一個模板。
將模板的一部分宣告為 widget。
將 'widget' 作為引數傳遞給 ::part() 偽元素，其中指定了 CSS 樣式。
由於 part (widget) 包含一個<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>This paragraph is rendered as normal without any style.</p>
      <template id="new-widget">
         <div part="widget">
         <p>This paragraph is rendered as a part of the main paragraph and thus the ::part() pseudo-element is applied here.</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>

列印頁面