Resumo

  • O primeiro rascunho público do W3C, de maio de 2012, propôs limites funcionais entre subárvores DOM. O texto de 2014 tratou da composição de árvores, e uma nota de 2018 registrou a incorporação do assunto a DOM, HTML, CSS Scoping e UI Events.
  • A norma DOM atual permite que filhos comuns da página sejam atribuídos a slots na árvore shadow. Eles mantêm seu lugar na árvore de nós; a apresentação os acomoda em outro arranjo. No CSS, :host, ::slotted e ::part delimitam contatos intencionais.

Pense num cartão de perfil. O autor do componente desenhou o botão, o alinhamento e a borda. A redação que publica a página quer escolher o retrato e o nome. Se a folha de estilos do site manda em cada canto do cartão, pode pintar o botão de verde elétrico sem pedir licença. Se o cartão se fecha por completo, a redação fica do lado de fora segurando a foto. A solução precisava de uma porta com lugares marcados.

O primeiro rascunho público Shadow DOM do W3C, de 22 de maio de 2012, apresentou limites funcionais entre subárvores DOM dentro do mesmo documento. O componente poderia preservar uma organização interna e participar da página. O rascunho de 17 de junho de 2014 enfatizou a composição: árvores diferentes contribuiriam para uma hierarquia apresentada ao usuário, com regras para seus encontros. Esses registros mostram o problema e as propostas da época.

O assunto logo ocupou mais de uma estante. A nota do W3C de 1º de março de 2018 diz que o material de Shadow DOM estava sendo incorporado às especificações DOM e HTML, CSS Scoping e UI Events. Estrutura, apresentação e eventos passaram a ser explicados junto das regras mais amplas da plataforma. O endereço do texto mudou; a questão de como as árvores convivem continuou.

Na norma viva DOM da WHATWG, um elemento funciona como host de uma shadow root e da árvore interna abaixo dela. A página ainda pode dar a esse host filhos comuns, no chamado light tree. Slots dentro da árvore shadow recebem a atribuição de alguns desses filhos. O retrato que a página forneceu aparece na parte superior do cartão, mas seu pai na árvore DOM de nós segue do lado da página. O navegador organiza uma apresentação composta sem transferir a posse dos nós.

Essa distinção salva horas de investigação. Dois elementos podem estar lado a lado na tela e pertencer a árvores diferentes. Se um slot não receber conteúdo, o componente pode mostrar sua alternativa. Uma inspeção que olha só para o resultado visual perderá a diferença entre onde algo aparece e onde vive no DOM. É como confundir o assento do convidado com o endereço de sua casa.

O CSS Shadow Module Level 1, em rascunho dos editores do CSSWG, descreve a outra metade do acordo. Seletores comuns da página não atravessam livremente a fronteira da árvore shadow para alcançar todos os elementos internos. O componente pode, porém, abrir pontos de estilo escolhidos. :host trata do host a partir dos estilos do componente; ::slotted alcança conteúdo atribuído dentro de seu escopo; ::part nomeia uma peça interna que o componente oferece à página. Há uma maçaneta pública, não um convite para desmontar a casa.

O documento CSS é um rascunho editorial e serve aqui para explicar a arquitetura das regras. Os textos do W3C estabelecem a sequência histórica. Juntos, os originais descrevem um contrato entre autores: a página fornece conteúdo, o componente decide onde recebê-lo e quais superfícies expor, e o navegador faz a composição sem apagar as fronteiras.