Атрибут 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>

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

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

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

        
          
          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)

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

Атрибут part указывается на элементе внутри Shadow DOM:

        
          
          <div part="название"></div>
          <div part="название"></div>

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

Можно указать несколько частей через пробел:

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

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

Для стилизации этих частей снаружи используется селектор ::part(...):

        
          
          my-widget::part(header) {  font-weight: bold;}
          my-widget::part(header) {
  font-weight: bold;
}

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

Если у элемента нет Shadow DOM или атрибут part не указан — селектор ::part(...) ничего не выберет.

Обычно всё, что внутри Shadow DOM — изолировано. Но иногда компонент хочет дать доступ к некоторым своим частям — например, заголовку или рамке. Атрибут part позволяет сделать такую «дырочку» в капсуле, не нарушая всей изоляции.

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

💡 Атрибут part пробрасывает только имена. А стили всё равно применяются снаружи через обычный CSS — внутри Shadow DOM они не видны.
💡 Даже если компонент использует Shadow DOM в mode: closed, проброшенные part всё равно можно стилизовать.
💡 В отличие от <slot>, part не связан с содержимым, вставленным в компонент, а относится к структуре внутри него.