part HTML атрибут - іменована частина тіньового DOM

Глобальний атрибут part використовується для експонування тіньової частини користувацького елемента для цілей стилізації.

Атрибут part дозволяє стилізувати тіньовий DOM користувацького елемента ззовні, призначаючи ім'я частини елементу всередині тіньового дерева. Це дозволяє авторам створювати користувацькі елементи з інкапсульованими стилями, одночасно надаючи гачки для зовнішньої стилізації конкретних внутрішніх компонентів.

Для стилізації елемента з атрибутом part використовується псевдоелемент ::part() у CSS. Наприклад, my-element::part(header) { color: blue; }.

HTML
<div part="header">...</div>

Значення

Значенням атрибута є одне або декілька імен частин, розділених пробілами.

part_name

Ім'я, яке використовується для ідентифікації частини елемента для стилізації.

Приклади використання

Результат
<style>
  my-card::part(title) {
    color: red;
    font-size: 1.5em;
  }
  my-card::part(content) {
    background-color: lightblue;
    padding: 10px;
  }
</style>

<my-card></my-card>

<script>
  class MyCard extends HTMLElement {
    constructor() {
      super();
      const shadow = this.attachShadow({ mode: 'open' });
      shadow.innerHTML = `
        <div part="title">Заголовок картки</div>
        <div part="content">Це вміст картки.</div>
      `;
    }
  }
  customElements.define('my-card', MyCard);
</script>

Підтримка браузерів

part

Останнє оновлення: