Атрибут exportparts

Атрибут exportparts используется во вложенных веб-компонентах, чтобы пробросить наружу part из их внутреннего Shadow DOM. Позволяет стилизовать части вложенных компонентов, несмотря на инкапсуляцию.

Допустим, у нас есть компонент <inner-card> с part="content", и компонент <outer-box>, который включает его.

        
          
          <outer-box></outer-box>
          <outer-box></outer-box>

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

        
          
          <!-- Контент в шаблоне inner-card --><template id="inner-template">  <div part="content">Контент</div></template><!-- Контент в шаблоне inner-card в шаблоне outer-box --><template id="outer-template">  <inner-card exportparts="content:inner-content"></inner-card></template>
          <!-- Контент в шаблоне inner-card -->
<template id="inner-template">
  <div part="content">Контент</div>
</template>

<!-- Контент в шаблоне inner-card в шаблоне outer-box -->
<template id="outer-template">
  <inner-card exportparts="content:inner-content"></inner-card>
</template>

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

        
          
          outer-box::part(inner-content) {  color: rebeccapurple;  font-weight: bold;}
          outer-box::part(inner-content) {
  color: rebeccapurple;
  font-weight: bold;
}

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

Атрибут exportparts указывается на компоненте внутри Shadow DOM, и содержит пары:

        
          
          <some-component exportparts="part-name:alias"></some-component>
          <some-component exportparts="part-name:alias"></some-component>

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

• part-name — имя part внутри дочернего компонента
• alias — под каким именем это part будет видно снаружи

Можно экспортировать несколько частей, через запятую:

        
          
          <card-box exportparts="header:main-header, body:main-body"></card-box>
          <card-box exportparts="header:main-header, body:main-body"></card-box>

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

Снаружи будет доступен селектор:

        
          
          my-component::part(main-header) { ... }
          my-component::part(main-header) { ... }

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

По умолчанию part работает только на один уровень инкапсуляции. То есть, если один компонент оборачивает другой, ::part(...) снаружи не увидит part из глубины.

Атрибут exportparts нужен, чтобы передать видимость part дальше — пробросить её наружу. Так называемый «туннель» для стилизации.

💡 Работает только если оба компонента используют Shadow DOM. Без него exportparts не нужен.
💡 Если не указать exportparts, то part из внутреннего компонента не будет виден снаружи — даже если задать ::part(...).
💡 Можно не задавать псевдоним: exportparts="title" — тогда наружу пробрасывается то же имя part.
💡 Не работает с mode: closed, потому что нельзя прочитать part без доступа к Shadow DOM.