Revelando o ::content/:slotted Pseudo-Element in Shadow DOM

O Shadow DOM, um aspecto crítico dos Web Components, apresenta uma nova maneira de encapsular e separar conteúdo. Dentro deste reino, o pseudoelemento ::content (anteriormente conhecido como ::slotted) desempenha um papel fundamental ao permitir o estilo profundo de nós distribuídos dentro de um ShadowTree.

Apresentando ::content

O pseudoelemento ::content é um seletor que se aplica a nós distribuídos dentro de um elemento. Ele opera junto com a tag (agora ) para facilitar a inserção de conteúdo do LightDOM no ShadowDOM.

Targeting Distributed Nodes

Quando elementos são movidos de sua posição original na marcação para outro local dentro do ShadowTree, eles se tornam nós distribuídos. ::content permite o direcionamento específico desses nós distribuídos, fornecendo uma maneira de aplicar estilos que são exclusivos para seu novo local.

Exemplo

Considere o código a seguir snippet:

#slides::content img {
    width: 25%;
    float: left;
}

Aqui, o seletor ::content é usado para direcionar imagens distribuídas dentro do elemento #slides. Os estilos aplicados a essas imagens afetarão apenas as cópias presentes no ShadowDOM, proporcionando isolamento do LightDOM.

Conclusão

O ::content (ou ::slotted ) o pseudoelemento é uma ferramenta indispensável no Shadow DOM, dando aos desenvolvedores da web a flexibilidade de estilizar profundamente os nós distribuídos sem interferir nos elementos do LightDOM. Isso permite o encapsulamento e a separação de preocupações, melhorando a capacidade de manutenção geral e a flexibilidade das aplicações web.