Shadow DOM – o lado obscuro da força

Bem, para inaugurar o blog, vou iniciar com esse assunto “novo”, porém bastante simples. Descobri este assunto assistindo uma palestra do Zeno Rocha, onde ele fala do trabalho da W3C chamado WebComponents mas, não vou me estender sobre este assunto.

O que é esse tal Shadow DOM ?

É uma sub-árvore de elementos, no meu ponto de vista, é uma forma de encapsulamento. Já parou pra pensar como os elementos são criados ? Por exemplo um player de HTML5, como ele insere todos aqueles botões e tudo mais ? No geral todos os elementos que conhecemos hoje são elementos HTML estilizados.

Pois bem, vamos ver como funciona esta coisa !

No exemplo vou utilizar o player HTML5 citado no texto anterior.

<video width=”320″ height=”240″ controls=””>

      <source src=”movie.mp4″ type=”video/mp4″>
<source src=”movie.ogg” type=”video/ogg”>
</video>

Um código simples, gera meu player de vídeo todo bonitinho.

Para vermos o código encapsulado vamos ativar o Shadow DOM:

No Google Chrome você pode ir nos Settings do Chrome Developer Tools e ativamos o Show Shadow DOM. A partir de agora conseguimos ver uma parte pelo WebInspector chamada  #document-fragment, lá que está nosso código encapsulado.

ShadowDOM

ShadowDOM2

Como podemos ver na imagem acima, agora podemos visualizar o código gerado automaticamente.

E agora José ? Como faço o meu código encapsulado ? 

Essa que é a grande carta na manga, o Shadow DOM não foi feito apenas para podermos visualizar o conteúdo gerado automaticamente, nós agora podemos modificar o conteúdo desses itens padrão, como também criar os nossos.

var container = document.querySelector(‘#divExemplo’);

var sroot = container.webkitCreateShadowRoot();

sroot.innerHTML = “Sou private!”;

O código é bem simples, apenas capturamos o elemento e criamos um HTML encapsulado para o mesmo, se vocês inspecionarem o elemento, serão capazes de ver que o HTML original do item continua lá, mas o que é exibido é apenas o fragmento do elemento.

Então pessoal, esse assunto ainda está em desenvolvimento, porém tem bastante coisa interessante que da para fazer, outra coisa é a compatibilidade, procurem depois por polyfill, e desculpem o código sem syntax highlight (meu wordpress é free)  e até breve !

Advertisements