::part()

Псевдоэлемент ::part() позволяет применять стили к отдельным частям элемента внутри Shadow DOM, если этим частям задан атрибут part.

        
          
          <template id="card-template">  <style>    ::slotted(h1) {      font-weight: bold;      color: #FF8630;      margin-bottom: 8px;      font-size: 2rem;    }    ::slotted(p) {      font-size: 1.2rem;    }  </style>  <div class="card" part="box">    <slot name="title">Пустая карточка 😔</slot>    <slot name="content"></slot>  </div></template><my-card>  <h1 slot="title">Крутая карточка 😎</h1>  <p slot="content">Контент очень крутой карточки</p></my-card><my-card></my-card>
          <template id="card-template">
  <style>
    ::slotted(h1) {
      font-weight: bold;
      color: #FF8630;
      margin-bottom: 8px;
      font-size: 2rem;
    }

    ::slotted(p) {
      font-size: 1.2rem;
    }
  </style>
  <div class="card" part="box">
    <slot name="title">Пустая карточка 😔</slot>
    <slot name="content"></slot>
  </div>
</template>

<my-card>
  <h1 slot="title">Крутая карточка 😎</h1>
  <p slot="content">Контент очень крутой карточки</p>
</my-card>

<my-card></my-card>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

        
          
          class MyCard extends HTMLElement {  constructor() {    super()    const shadow = this.attachShadow({ mode: 'open' })    const template = document.getElementById('card-template')    const content = template.content.cloneNode(true)    shadow.appendChild(content)  }}customElements.define('my-card', MyCard)
          class MyCard extends HTMLElement {
  constructor() {
    super()
    const shadow = this.attachShadow({ mode: 'open' })
    const template = document.getElementById('card-template')
    const content = template.content.cloneNode(true)
    shadow.appendChild(content)
  }
}

customElements.define('my-card', MyCard)

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

        
          
          my-card::part(box) {  color: #ffffff;  border: 1.5px solid #ff8630;  background: #ffffff22;}
          my-card::part(box) {
  color: #ffffff;
  border: 1.5px solid #ff8630;
  background: #ffffff22;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Запись ::part(имя) применяется к элементу, на котором установлен part="имя" внутри Shadow DOM. Также есть несколько условий:

• Элемент должен быть в shadowRoot;
• Нужно явно указать атрибут part у целевого элемента;
• Элемент, использующий ::part(), должен находиться снаружи компонента.

        
          
          custom-element::part(name) {  /* стили */}
          custom-element::part(name) {
  /* стили */
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Shadow DOM изолирует внутреннюю разметку компонента от внешнего CSS. Однако, с помощью ::part() можно выбрать конкретные участки внутренней разметки, помеченные part="", и изменить их стиль снаружи.

Это особенно удобно, если вы хотите позволить разработчикам кастомизировать внешний вид вашего компонента, не открывая весь Shadow DOM.

💡 После ::part() можно использовать простые псевдоклассы, например ::part(name):hover, но нельзя использовать структурные псевдоклассы - ::part(name):first-child

💡 Атрибут exportparts позволяет передавать part из вложенного компонента выше — для сложных вложенных структур.

        
          
          <inner-component exportparts="button, icon"></inner-component>
          <inner-component exportparts="button, icon"></inner-component>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

💡 Можно указать несколько имён в part:

        
          
          <div part="header primary"></div>
          <div part="header primary"></div>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

И потом выбирать по любому:

        
          
          x-box::part(header) { color: red; }x-box::part(primary) { font-weight: bold; }
          x-box::part(header) { color: red; }
x-box::part(primary) { font-weight: bold; }

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать