Псевдоэлемент CSS `::part()`

::part CSS псевдоэлемент представляет любой элемент в теневом дереве, имеющий соответствующий атрибут part.

custom-element::part(foo) {
  /* Styles to apply to the `foo` part */
}

Описание

Глобальный атрибут part делает элемент теневого дерева видимым для родительского DOM. Имена частей, объявленные с помощью атрибута part, используются как параметр псевдоэлемента ::part(). Таким образом, можно применять стили CSS к элементам теневого дерева извне.

Имена частей похожи на классы CSS: несколько элементов могут иметь одно и то же имя части, а у одного элемента может быть несколько имен частей. Все имена частей, используемые в псевдоэлементе ::part(), должны присутствовать в значении part, объявленном для элемента теневого дерева, однако порядок имен частей не имеет значения, то есть селекторы ::part(tab active) и ::part(active tab) равнозначны.

Псевдоэлемент ::part() виден только родительскому DOM. Это означает, что при вложении теневого дерева его части видны только непосредственному родителю, но не другим предкам. Атрибут exportparts устраняет это ограничение, явно экспортируя уже определенные имена part и делая их доступными для глобального применения стилей.

К селектору ::part() можно добавлять псевдоклассы (например, ::part(label):hover), но нельзя добавлять структурные псевдоклассы, соответствующие информации о дереве, такие как :empty и :last-child.

К селектору ::part() можно добавлять дополнительные псевдоэлементы, например ::before, но добавлять дополнительные элементы ::part() нельзя. Например, ::part(confirm-button)::part(active) никогда ничего не выбирает, то есть это не то же самое, что ::part(confirm-button active). Это связано с тем, что такое поведение раскрывает больше информации о структуре, чем предусмотрено.

Синтаксис

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

Примеры

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);
    }
  },
);

Результат

Спецификации

Совместимость с браузерами

См. также

• атрибут part
• функция псевдокласса :state()
• атрибут exportparts
• модуль частей теневого DOM CSS