Shadow DOM: como criar componentes encapsulados e independentes

O Shadow DOM (Document Object Model) é uma excelente ferramenta para web developers retirarem por completo a fragilidade da criação de aplicativos voltados para a web. Tais problemas são originários da natureza global inerente das tecnologias HTML, CSS e JavaScript, as mais utilizadas na criação de aplicativos web.

Com o passar do tempo, um grande número de ferramentas para contornar tais problemas foi criada, como os web components Shadow DOM. 

Web Components Facilitam a Vida dos Web Developers

Por exemplo, ao utilizar uma nova ID ou até mesmo uma nova classe HTML, não é possível saber se terá algum tipo de conflito com um nome existente já utilizado pela página. Bugs sutis no browser podem surgir. A especificidade do CSS logo se torna um grande problema, os seletores de estilo ficam fora de controle e a performance da página é prejudicada. Este é apenas um dos exemplos de problemas que podem vir a ocorrer, mesmo quando frameworks são utilizados.

Como Shadow DOM Pode Ajudar o Trabalho dos Programadores

A relação do programador com o processo de programação pode melhorar em apenas alguns instantes se ele tiver noções de Shadow DOM.

O que é Shadow DOM

Para quem não está familiarizado com Shadow DOM, essa funcionalidade corrige possíveis erros no CSS e no DOM. De forma bastante resumida, a tecnologia Shadow DOM nada mais é do que uma tecnologia do browser que permite criar web components diversos com aparência e comportamento específicos que não influenciam os outros elementos presentes ao seu redor, também ocultando a sua estrutura.

Assim, o Shadow DOM apresenta uma maneira de programar mais simples e organizada para web. Sem ferramentas ou convenções de nomenclatura, o programador será capaz de agrupar CSS utilizando marcações, ocultar detalhes de implementação e criar componentes encapsulados dentro do JavaScript.

Encapsulamento

Um aspecto importante do web component é o seu encapsulamento. Encapsular um web component nada mais é do que manter a estrutura, o estilo e o comportamento da marcação de maneira oculta e separada dos demais códigos da página. Isso é feito com a finalidade de evitar um possível conflito e para que o código possa ser mantido funcional e limpo. A API Shadow DOM é uma parte fundamental deste processo, fornecendo uma maneira de anexar um DOM separado oculto a um elemento. 

Web Components: Shadow DOM

Shadow DOM é um dos três padrões de componentes da Web no desenvolvimento de páginas e apps. Os outros dois padrões são modelos HTML e elementos personalizados. As importações de HTML costumavam fazer parte da lista, porém hoje em dia passaram a ser obsoletos.

Não é necessário criar web components que usam o shadow DOM. Mas, ao fazer isso, o programador aproveitará todos os benefícios da ferramenta. Alguns desses benefícios são:

• Escopo CSS
• Encapsulamento DOM
• Composição e reutilização

Elementos Reutilizáveis

Com o Shadow DOM os elementos criados serão personalizados podendo ser reutilizados. Tais elementos são resilientes, altamente configuráveis ​​e reutilizáveis em projetos distintos. Os web components personalizados são para criar um novo HTML (via API JS), o Shadow DOM atua no fornecimento do HTML e do CSS. Estas duas APIs combinam-se para criar um componente com HTML, CSS e JavaScript independentes e não conflitantes.

Quais problemas Shadow DOM pode resolver

O Shadow DOM foi criado com o intuito de ser uma ferramenta útil na criação de web components. Assim, proporciona soluções tangíveis para problemas comuns no desenvolvimento web:

• DOM isolado: o DOM de componente é encapsulado.
• CSS com seu escopo: CSS definido dentro do shadow DOM tem escopo para ele. As regras de estilo não saem dele, assim não irá aparecer na página.
• Simplifica CSS: DOM com escopo dá a opção de utilizar CSS simples, nomes de ID e de classe mais genéricos sem o possível problema de conflito de nomenclaturas.
• Produtividade elevada aos web developers: Haverá blocos DOM em vez de uma página global. 

Por dentro das nomenclaturas de Shadow DOM

O DOM (Document Object Model) é uma estrutura semelhante a uma árvore que contém diversos nós conectados. O Shadow DOM permite que as shadow tree ocultas sejam anexadas a elementos na shadow tree regular. A shadow tree DOM iniciará uma shadow root sob a qual você poderá anexar elementos diversos, como faria ao utilizar um document object model regular.

Existem algumas particularidades da terminologia shadow DOM que você deve conhecer:

• Host de sombra: o nó DOM regular ao qual o DOM de sombra está anexado.
• Shadow Tree: A árvore DOM dentro do DOM de sombra.
• Limite da sombra: o local onde o DOM da sombra termina e o DOM comum inicia.
• Shadow Root: O nó (ou node) raiz da Shadow Tree.

Utilizando os nós no Shadow DOM tree

Pode-se alterar os nós (ou nodes) no shadow DOM do mesmo modo que se faria nos nós não sombra. Um exemplo disto seria, por exemplo, anexar os filhos ou definindo os atributos, estilizando nós individuais ou dando um estilo a toda a árvore shadow DOM dentro de um elemento. A diferença é que nenhum código dentro de um shadow DOM pode afetar qualquer coisa fora dele, permitindo um encapsulamento prático e muito útil.

Shadow DOM não é novidade, porém é muito útil

Para quem pensa que Shadow DOM é um recurso inovador e novo, isso não é verdade. Os navegadores utilizam esta ferramenta há muitos anos para encapsular a estrutura interna de um elemento. 

Assim, embora pareça uma função nova, é importante notar que trata-se de uma tática já muito utilizando no mundo inteiro. De qualquer forma, é interessante dominar suas funcionalidades para se tornar um desenvolvedor web ainda mais qualificado. 

A Strider te conecta com empresas americanas

Crie seu perfil na Strider e aplique para vagas remotas internacionais hoje mesmo!