::part()

Базовая поддержка Широко доступна

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с июля 2020 года.

Псевдоэлемент ::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(label):hover) могут быть добавлены к селектору ::part(), но структурные псевдоклассы, которые сопоставляются на основе информации о дереве (например, :empty), а не информации о локальном элементе (например, :last-child), добавлять нельзя.

Дополнительные псевдоэлементы, такие как ::before, могут быть добавлены к селектору ::part(), но дополнительные элементы ::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);
    }
  },
);

Результат

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

Спецификация
CSS Shadow Parts # part

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

	Десктопные					Мобильные
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`::part`	73	79	72	60	13.1	73	79	52	13.4	11.0	73

См. также

part атрибут
:state() функция псевдокласса
exportparts атрибут
Модуль CSS shadow parts

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/::part