exportparts HTML атрибут - експорт частин тіньового DOM

Глобальний атрибут exportparts дозволяє користувацькому елементу експортувати іменовані частини зі свого тіньового DOM назовні, дозволяючи зовнішньому CSS стилізувати ці частини.

Атрибут exportparts приймає розділений комами список імен частин, які експортуються. Наприклад, якщо користувацький елемент має тіньову частину з іменем "button", додавання exportparts="button" до тегу користувацького елемента дозволить зовнішньому CSS націлюватися на ::part(button) для цього користувацького елемента.

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

HTML
<my-custom-element exportparts="header, content"></my-custom-element>

Значення

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

part_name

Ім'я частини, визначеної за допомогою атрибута part всередині тіньового DOM.

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

Результат
<style>
  my-button::part(label) {
    color: blue;
    font-weight: bold;
  }
</style>

<my-button exportparts="label"></my-button>

<script>
  class MyButton extends HTMLElement {
    constructor() {
      super();
      const shadow = this.attachShadow({ mode: 'open' });
      const button = document.createElement('button');
      const span = document.createElement('span');
      span.setAttribute('part', 'label');
      span.textContent = 'Натисни мене';
      button.appendChild(span);
      shadow.appendChild(button);
    }
  }
  customElements.define('my-button', MyButton);
</script>

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

exportparts

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