Em um post anterior, expliquei o básico da criação de tags personalizadas. De fato, as tags personalizadas removem alguma fragilidade na construção de ótimos aplicativos da web. No entanto, a busca pelo controle não para. E as tags personalizadas tradicionais não são suficientes para criar aplicativos de alto desempenho. Por exemplo, o número de seletores de estilo em seu código pode aumentar com tags personalizadas. Esta é apenas uma das muitas coisas que podem causar problemas de desempenho.
Uma maneira de corrigir esse problema é através do Shadow DOM.
O Shadow DOM funciona introduzindo estilos com escopo. Não requer nenhuma convenção ou ferramenta de nomenclatura especial. Agrupar CSS com marcação torna-se simples com o Shadow DOM. Além disso, esse recurso nos permite ocultar todos os detalhes sobre a implementação em JavaScript vanilla.
Por que usar Shadow DOM?
Shadow DOM fornece as seguintes soluções:
- Permite elementos isolados no DOM. Elementos isolados não serão retornados por consultas como
document.querySelector. - Permite CSS com escopo. O CSS com escopo garante que todas as regras de estilo permaneçam na página. Também significa seletores CSS mais simples, sem conflitos de nomenclatura e muitas classes genéricas.
Nosso Exemplo
Para demonstrar o Shadow DOM, vamos usar um componente simples chamado tuts-tabs. Todas as referências neste post apontarão para este pedaço de código. Para experimentar o Shadow DOM, basta dar uma olhada na demonstração abaixo:
Entendendo o Shadow DOM
O que é um Shadow DOM?
Antes de começar a codificar com o Shadow DOM, você precisa entender o DOM regular.
HTML atua como a espinha dorsal de um site. Em apenas alguns minutos você pode criar uma página. Quando você abre essa página em um navegador, o DOM começa a entrar em ação. Depois que o navegador carrega uma página, ele começa a analisar HTML em um modelo de dados. Este modelo de dados é uma estrutura de árvore com nós. Esses nós representam os elementos em seu HTML. Esse modelo de dados é fácil de modificar e manipular com código.
A desvantagem é que toda a sua página da Web ou até mesmo um aplicativo da Web complexo é tratado como uma única estrutura de dados. Isso não é muito fácil de depurar! Por exemplo, estilos CSS destinados a um componente podem acabar afetando outro componente em outro lugar do seu aplicativo.
Quando você deseja isolar uma parte de sua interface do resto, você pode usar iframes. Mas os iframes são pesados e extremamente restritivos.
É por isso que o Shadow DOM foi introduzido. É um recurso poderoso dos navegadores modernos que permite que desenvolvedores da Web incluam subárvores de vários elementos no DOM. Essas subárvores do DOM não afetam a árvore principal do documento. Tecnicamente, são conhecidos como árvore de sombra.
A árvore das sombras tem um raiz da sombra que é anexado a um pai no DOM. Este pai é conhecido como host sombra.
Por exemplo, se você tiver conectado a um navegador que é alimentado por WebKit, ele será traduzido para um controle deslizante. Por quê? Este é um controle deslizante porque um dos elementos DOM da subárvore entende o “intervalo” para alterar sua aparência e introduzir funcionalidades semelhantes a controles deslizantes. Esta é uma vantagem que o Shadow DOM traz para a guia.
Uau, isso é muita teoria. Agora, você pode querer escrever algum código para implementar o Shadow DOM em seu código.
Guia passo a passo para usar o Shadow DOM
Etapa 1. Criar um elemento Shadow DOM
Usar element.attachShadow() para criar um elemento Shadow DOM.
Em nosso exemplo, tuts-tabvocê verá este link de código para criar o elemento Shadow DOM.
let shadowRoot = this.attachShadow({mode: 'open'});
Etapa 2. Adicionar conteúdo à raiz da sombra
Em seguida, adicionaremos conteúdo à raiz sombra usando .innerHTML. Observe que esta não é a única maneira de preencher seu Shadow DOM. Existem muitas APIs para ajudá-lo a preencher o Shadow DOM.
shadowRoot.innerHTML = ``
Etapa 3. Conecte um elemento personalizado ao Shadow DOM
Conectar elementos personalizados ao shadow DOM é extremamente simples. Lembre-se, ao combinar elementos personalizados com o Shadow DOM, você poderá criar componentes encapsulados com CSS, JavaScript e HTML. Como resultado, você criará um novo componente da Web que pode ser reutilizado em seu aplicativo.
Em nosso exemplo, criamos um novo elemento personalizado usando o customElements.define(). Conforme mencionado no tutorial anterior, o novo elemento deve ter um ‘-‘ em seu nome. E a tuts-tabs componente estende HTMLElement.
À medida que estendemos HTMLElementé importante chamar super() dentro do construtor. Além disso, o construtor é onde o shadowRoot precisa ser criado.
customElements.define('tuts-tabs', class extends HTMLElement {
constructor() {
super(); // always call super() first in the constructor.
// Attach a shadow root to .
const shadowRoot = this.attachShadow({mode: 'open'});
...
});
Uma vez o shadowRoot é criado, você pode criar CSS regras para isso. As regras CSS podem ser incluídas no
Etapa 4. Adicionar estilo ao Shadow DOM
CSS relacionado ao tuts-tab pode ser escrito dentro do
Tag. Lembre-se, todos os estilos declarados aqui terão como escopo o tuts-tab componente web. CSS com escopo é um recurso útil do Shadow DOM. E, tem as seguintes propriedades:
- Seletores CSS não afetam componentes fora do shadow DOM.
- Elementos no shadow DOM não são afetados por seletores fora dele.
- Os estilos têm como escopo o elemento host.
Se você deseja selecionar o elemento personalizado dentro do shadow DOM, você pode usar o :host pseudo-classe. Quando o :host pseudoclass é usada em uma estrutura DOM normal, não teria nenhum impacto. Mas, dentro de um shadow DOM, faz uma diferença muito grande. Você encontrará o seguinte :host estilo no tuts-tab componente. Ele decide a exibição e o estilo da fonte. Este é apenas um exemplo simples para mostrar como você pode incorporar :host em sua sombra DOM.
Uma captura com :host é a sua especificidade. Se a página principal tiver um :hostserá de maior especificidade. Todos os estilos dentro do estilo pai venceriam. Essa é uma maneira de substituir estilos dentro do elemento personalizado, de fora.
:host {
display: inline-block;
width: 650px;
font-family: 'Roboto Slab';
contain: content;
}
À medida que seu CSS se torna mais simples, a eficiência geral do shadow DOM melhora.
Todos os estilos definidos abaixo são locais para a raiz da sombra.
shadowRoot.innerHTML = `
Da mesma forma, você tem a liberdade de introduzir folhas de estilo no shadow DOM. Quando você vincula folhas de estilo dentro do shadow DOM, elas serão delimitadas dentro da árvore shadow. Aqui está um exemplo simples para ajudá-lo a entender esse conceito.
shadowRoot.innerHTML = ` ...
Etapa 5. Definir elementos HTML no componente personalizado
Em seguida, podemos definir os elementos HTML do nosso tuts-tab.
Em uma estrutura de abas simples, deve haver títulos que possam ser clicados e um painel que reflita o conteúdo do título selecionado. Isso significa claramente que nosso elemento personalizado deve ter um div com títulos e div para o painel. Os componentes HTML serão definidos conforme abaixo:
customElements.define('tuts-tabs', class extends HTMLElement {
constructor() {
super(); const shadowRoot = this.attachShadow({mode: 'open'});
shadowRoot.innerHTML = `
....
// Our HTML elements for tuts-tab
...
...
...
`;
}
...
});
Dentro dos painéis divvocê encontrará uma tag interessante chamada
Etapa 6. Usando Slots no Shadow DOM
Slot desempenha um papel crucial na API Shadow DOM. Um slot atua como um espaço reservado dentro de componentes personalizados. Esses componentes podem ser preenchidos por sua própria marcação. Existem três tipos diferentes de declaração de slot:
- Você pode ter um componente com zero slots.
- Você pode criar um slot com fallback ou conteúdo vazio.
- Você pode criar um slot com uma árvore DOM inteira.
Na nossa tuts-tabstemos um slot nomeado para os títulos das guias e outro slot para o painel. A ranhura nomeada cria furos que podem ser referenciados pelo nome.
customElements.define('tuts-tabs', class extends HTMLElement {
constructor() {
super(); const shadowRoot = this.attachShadow({mode: 'open'});
shadowRoot.innerHTML = `
....
// Our HTML elements for tuts-tab
Etapa 7: preencher os slots
Agora, é hora de preencher os slots. Em nosso tutorial anterior, aprendemos sobre quatro métodos diferentes para definir elementos personalizados. O tuts-tabs usa dois desses métodos para construir a aba: connectedCallback e disconnectedCallback.
Dentro connectedCallback vamos preencher o slot definido na etapa 6. Nosso connectedCallback será definido como abaixo. Nós fazemos uso de querySelector para identificar o tabsSlot e panelsSlot. Claro, esta não é a única maneira de identificar slots em seu HTML.
Uma vez que os slots são identificados, você precisa atribuir nós a ele. Dentro tuts-tabusamos o seguinte tabsSlot.assignedNodes para identificar o número de guias.
connectedCallback() {
...
const tabsSlot = this.shadowRoot.querySelector('#tabsSlot');
const panelsSlot = this.shadowRoot.querySelector('#panelsSlot');
this.tabs = tabsSlot.assignedNodes({flatten: true});
this.panels = panelsSlot.assignedNodes({flatten: true}).filter(el => {
return el.nodeType === Node.ELEMENT_NODE;
});
...
}
Também o connectedCallback é onde registraríamos todos os listeners de eventos. Sempre que o usuário clica em um título de guia, o conteúdo do painel precisa ser alterado. Os ouvintes de eventos para conseguir isso podem ser registrados no connectedCallback função.
Etapa 8: Implementar Lógica e Interatividade
Não vamos nos aprofundar na lógica, em como implementar guias e sua funcionalidade. No entanto, lembre-se de que os métodos a seguir são implementados em nosso tuts-tab componente para alternar entre abas:
-
onTitleClick: Esse método captura o evento de clique nos títulos das guias. Ele ajuda a alternar o conteúdo dentro do painel de guias. -
selectTab: Esta função é responsável por ocultar os painéis e mostrar o painel direito. Além disso, é responsável por destacar a guia, que foi selecionada. -
findFirstSelected: Este método é usado para selecionar uma guia quando ela é carregada pela primeira vez. -
selected: Este é um getter e um setter para buscar a guia selecionada.
Etapa 9. Definir métodos de ciclo de vida
Seguindo em frente, não se esqueça de definir o disconnectedCallback. Este é um método de ciclo de vida em elementos personalizados. Quando o elemento personalizado é destruído da exibição, esse retorno de chamada é acionado. Este é um dos melhores lugares para remover ouvintes de ação e redefinir controles em seu aplicativo. No entanto, o retorno de chamada tem como escopo o elemento personalizado. No nosso caso, seria tuts-tab.
Etapa 10. Use o Novo Componente!
O passo final é usar tuts-tab em nosso HTML. Podemos inserir tuts-tab, com bastante facilidade na marcação HTML. Aqui está um exemplo simples para demonstrar seu uso.
content panel 1 content panel 2 content panel 3
Conclusão
Aqui vamos nós! Chegamos ao final de um tutorial importante onde criamos e usamos um elemento personalizado. O processo é simples e se mostra extremamente útil no desenvolvimento de páginas da web. Esperamos que você tente criar elementos personalizados e compartilhe suas experiências conosco.
