::part()

Mô tả

Thuộc tính toàn cục part làm cho một phần tử shadow tree hiển thị với DOM cha của nó. Tên các phần được khai báo bằng thuộc tính part được dùng làm tham số của phần tử giả ::part(). Theo cách này, bạn có thể áp dụng các kiểu CSS cho các phần tử trong shadow tree từ bên ngoài.

Tên phần tương tự như các lớp CSS: nhiều phần tử có thể có cùng tên phần, và một phần tử có thể có nhiều tên phần. Tất cả tên phần được dùng trong phần tử giả ::part() đều phải có mặt trong giá trị part được khai báo trên phần tử shadow tree nhưng thứ tự của tên phần không quan trọng, tức là các bộ chọn ::part(tab active) và ::part(active tab) là như nhau.

Phần tử giả ::part() chỉ hiển thị với DOM cha. Điều này có nghĩa là khi một shadow tree được lồng vào nhau, các phần không hiển thị với bất kỳ tổ tiên nào ngoài cha trực tiếp. Thuộc tính exportparts giải quyết hạn chế này bằng cách xuất rõ ràng các tên part đã được định nghĩa, làm cho chúng có thể được tạo kiểu toàn cục.

Lớp giả (chẳng hạn như ::part(label):hover) có thể được thêm vào bộ chọn ::part(), nhưng lớp giả cấu trúc khớp dựa trên thông tin cây, chẳng hạn như :empty và :last-child, thì không thể thêm vào.

Các phần tử giả bổ sung, chẳng hạn như ::before, có thể được thêm vào bộ chọn ::part(), nhưng phần tử ::part() bổ sung không thể được thêm vào. Ví dụ, ::part(confirm-button)::part(active) không bao giờ khớp với bất kỳ thứ gì, tức là nó không giống với ::part(confirm-button active). Điều này là vì làm như vậy sẽ tiết lộ nhiều thông tin cấu trúc hơn dự định.

Cú pháp

::part(<ident>+) {
  /* ... */
}

Ví dụ

HTML

<template id="tabbed-custom-element">
  <style>
    *,
    ::before,
    ::after {
      box-sizing: border-box;
      padding: 1rem;
    }
    :host {
      display: flex;
    }
  </style>
  <div part="tab active">Tab A</div>
  <div part="tab">Tab B</div>
  <div part="tab">Tab C</div>
</template>

<tabbed-custom-element></tabbed-custom-element>

CSS

tabbed-custom-element::part(tab) {
  color: blue;
  border-bottom: transparent solid 4px;
}

tabbed-custom-element::part(tab):hover {
  background-color: black;
  color: white;
}

tabbed-custom-element::part(tab active) {
  border-color: blue !important;
}

JavaScript

const template = document.querySelector("#tabbed-custom-element");
globalThis.customElements.define(
  template.id,
  class extends HTMLElement {
    constructor() {
      super().attachShadow({ mode: "open" }).append(template.content);
    }
  },
);

Kết quả

Thông số kỹ thuật

Tương thích trình duyệt

Xem thêm

• Thuộc tính part
• Hàm lớp giả :state()
• Thuộc tính exportparts
• Module CSS shadow parts