Part e Exportparts para estilização externa

O encapsulamento rigoroso de estilos do DOM de sombra impede que os consumidores alterem individualmente os elementos dentro de um componente. As variáveis de CSS funcionam para propriedades globais, mas não é possível, por exemplo, definir um border-radius personalizado para o botão interno de fechar. Os parts resolvem esse problema.

Marque um elemento interno da sombra com part="name". Os consumidores poderão então selecioná-lo com o pseudo-elemento ::part(name): my-dialog::part(close-button) { color: red; }. O elemento nomeado se torna um ponto de extensão para estilização, enquanto o restante da sombra continua encapsulado.

Separe os nomes por espaços para expor um elemento como vários parts: part="button primary". ::part(button) o seleciona de forma genérica, enquanto ::part(primary) o seleciona como um elemento de estilo primário. Cada nome é correspondido de forma independente.

::part permite apenas alguns pseudo-elementos (:hover, :focus, :disabled) — não permite combinadores de descendentes nem seleções estruturais adicionais. ::part(card) p é inválido; não é possível entrar em um part usando seletores de descendentes.

Quando um elemento personalizado aninha outro elemento personalizado dentro da própria sombra, os parts do elemento interno normalmente não são expostos à página externa. exportparts="close-button" no elemento aninhado encaminha esses parts para o elemento hospedeiro externo.

exportparts="close-button: dismiss" exporta o part interno com um novo nome no elemento externo. Isso permite que o componente externo apresente uma interface de nomes limpa, independente dos elementos internos que ele combina.

As propriedades personalizadas expõem valores (cor, espaçamento e fontes). Os parts expõem elementos (toda a superfície de CSS — bordas, transformações e animações). Use propriedades personalizadas para tokens globais e parts para personalizações pontuais no nível do elemento. Ambos podem coexistir no mesmo componente.

Na prática de sistemas de componentes, exponha uma pequena interface de parts para os elementos mais personalizados (botões, cabeçalhos e indicadores), além de um conjunto generoso de propriedades personalizadas para cor, espaçamento e tipografia. Os consumidores podem aplicar temas no nível dos valores ou dos elementos, conforme a necessidade.

Os nomes dos parts tornam-se parte da API pública do componente — alterá-los quebra o CSS dos consumidores. Escolha nomes que descrevam a função do elemento ("close-button", "header", "track"), em vez da posição ("first-button"), para que a API continue significativa à medida que a implementação evolui.

Liste todos os parts disponíveis (e os parts exportados) no arquivo README do componente. Sem documentação, os consumidores precisam inspecionar o DOM para descobrir os parts, o que os acopla ao que encontrarem. Trate a lista de parts como a lista de propriedades de um componente de uma estrutura.

::part e exportparts estão disponíveis em todos os navegadores modernos. Até versões mais antigas do Safari já oferecem suporte a ::part. Use-os sem receio; para navegadores muito antigos (em sua maioria obsoletos), use propriedades personalizadas de CSS adicionais como alternativa.

O atributo part expõe elementos individuais da sombra para estilização externa por meio de ::part(name) — todos os recursos de CSS sem quebrar o encapsulamento. exportparts encaminha parts de elementos personalizados aninhados para o elemento hospedeiro externo, com a opção de renomeá-los. Combine parts com propriedades personalizadas de CSS para obter uma interface completa de aplicação de temas e documente a lista de parts como parte da API do componente.