4. Introdução
Todas as vezes que você precisa implementar um slider ou elementos de um
framework que você gosta, invariavelmente você precisa copiar um grande pedaço de
código HTML, CSS e Javascript para depois aplicar em seu projeto.
5. O Problema do HTML/CSS macarrônicos
A forma de desenhar uma página Web mudou bastante nos últimos 20 anos.
As tecnologias básicas ainda são as mesmas:
HTML 5 para estruturar um documento.
CSS 3 para estilizar os elementos no documento.
Javascript para adicionar comportamento.
6. O que são os Web Components
A ideia de criar componentes na web não é nova. A cada novo framework ou a cada
novo plugin, tentamos fazer isso. O problema é que um componente só é um
componente se ele pode ser reutilizado, diversas vezes, em qualquer lugar do projeto,
sem sofrer alterações acidentais por códigos externos e também sem modificar outros
elementos. É aí que entram os Web Components.
7. Os componentes web, na forma atual, são
constituídos de quatro partes:
Elementos Customizados (Custom Elements)
DOM Sombra (Shadow DOM)
Modelos (Templates)
Importação HTML (HTML Imports)
8. Elementos Customizados (Custom Elements)
Elementos que podem ser nomeados como quisermos e operar a nosso gosto.
Quando criamos um elemento customizado, pode criá-lo do zero ou pode estender
algum elemento HTML existente, como, por exemplo, o <button> e fornecer uma
funcionalidade ou apresentação modificada que precisar.
9. DOM Sombra (Shadow DOM)
A DOM Sombra (Shadow DOM) é o aspecto fundamental do funcionamento dos
componentes web.
É o lugar onde o código escondido vive.
Fabricantes de navegadores tem usado esse DOM Sombra por anos, para implementar,
nativamente, elementos como o input, audio, video e outros.
A ideia básica é que você pode pegar todo o código que não precisa ser visto e escondê-
lo.
Isso permite você lidar, somente, com dados que ajustam o elemento, como a altura,
largura e caminho dos arquivos de vídeo ao usarmos o elemento<video>.
10. DOM Sombra (Shadow DOM)
Cada instância é auto-contida.
Folhas de estilo e códigos JavaScript dentro do elemento, eles não vazarão,
acidentalmente, e não afetará qualquer outra coisa na página.
Reciprocamente, os CSS e JavaScript que estiverem em qualquer lugar da sua página,
não afetarão seu componente web, exceto aquelas que forem criadas especificamentes
para estilizar e interagir com ele.
Isso significa que não precisará criar um espaço de nome em seus IDs e classes CSS
para evitar conflitos.
11. DOM Sombra (Shadow DOM)
Chrome - Ferramentas de Desenvolvedor (Dev Tools)
12. Shadow DOM - HabilitadoShadow DOM - Desabilitado
13. Modelos (Templates)
Modelo é uma combinação de HTML, CSS e JavaScript, e inclui a funcionalidade que
disponibilizamos quando usarmos o elemento.
14. Importação HTML (HTML Imports)
Importação de HTML permite que você pegue tudo que foi desenvolvido e faça
funcionar na sua página.
Os componente web são definidos dentro de arquivos HTML externos, assim, esse
arquivo precisa ser importado para que o elemento customizado funcione.
17. O que são Polyfills?
Polyfill é um "shim de JavaScript que replica a API padrão nos navegadores mais
antigos". "API padrão" se refere a um determinado recurso ou tecnologia HTML5.
Por exemplo, um polyfill de Localização Geográfica.
18. Implementações Não-Nativas
O suporte nativo está a caminho por parte do Chrome, Opera e Firefox, porém, não está
completo ainda. O IE e o Safari ainda não publicaram seus planos.
Por hora, se você quiser trabalhar com componentes web, terá de usar uma das
implementações não-nativas existentes.
A boa notícia é que as duas soluções mais populares foram criadas pelo Google e pela
Mozilla, então, podemos esperar que haja consistência no modo de operação do
suporte nativo.
19. Polymer(Google)
O Polymer vem com uma biblioteca completa de componentes web pré-criados.
Ela inclui os "elementos base do Polymer que são orientados a funcionalidades, além
dos "elementos Paper", que são orientados a design.
Ao criar elementos customizados com o Polymer, ao invés de usar o formato <element
name="..."> você usará <polymer-element name="...">.
20. Polymer - Suporte a Navegadores
Chrome Android
Chrome
Canary
Firefox
IE 10+
Safari 6+
Mobile Safari
21. X-Tags(Mozilla)
X-Tags é uma biblioteca JavaScript criada pela Mozilla que, atualmente, leva vantagem
sobre o Polymer pelo seu suporte a navegadores ser maior.
22. X-Tags - Suporte a Navegadores
Firefox 5+ desktop & mobile
Chrome 4+
Chrome Android 2.1+
Safari 4+ desktop & mobile
IE9+
Opera 11+ desktop & mobile