lunes, 2 de enero de 2017

Entendiendo Shadow DOM V1 y custom elements V1

Shadow DOM es uno de los 4 estandares de Componentes web
 Con Shadow DOM puedes crear nuevos elementos HTML y CSS, con su propio scope. Y puede ser combinado con "Custom elements" haciendo un unico elemento con sus propio html, css, js.

DOM Aislado: Todo el html esta aislado del html principal, intentar esto: document.querySelector() , no va a devolver nada.

CSS aislado: Todo el CSS dentro del elemento no afectara al html principal. Puedes usar id, clases con el mismo nombre y no tendras problemas.

Con esto tenemos un panorama de que podemos construir nuestras aplicaciones web en pequeños pedazos y unirlos a como queramos.

Por el momento Web components no es del todo estandar en los navegadores, pero por suerte podemos usar un polyfills.

http://webcomponents.org/polyfills/


Ejemplos de como usar Shadow DOM, por ahora solo funciona en chrome (Solo tienes que examinar el codigo para ver como funciona.):
https://saulburgos.github.io/practices/2017/shadowdom/
https://saulburgos.github.io/practices/2017/customelements/

Como Shadow y custom elements no son totalemente estandar por el momento, no puedes usarlos cuando quieras, a menos que uses https://www.polymer-project.org , que es una library con todos los polyfills necesarios para que funcione en todos los navegadores

Confusion

"Web components" es el termino que encapsula 4 tipos de API hasta el momente: html templates, shadow dom, html import y custom elements.  Pero en internet mucha gente se refiere a "web components" al uso mezclado de estas APIs. Por ejemplo : shadow dom y custom elements.

Asi que no te confundas si en un tutorial ves este tipo de uso.


links:
https://developer.mozilla.org/en-US/docs/Web/Web_Components/Custom_Elements
https://developers.google.com/web/fundamentals/getting-started/primers/customelements 
https://www.smashingmagazine.com/2016/12/styling-web-components-using-a-shared-style-sheet/
https://hayato.io/2016/shadowdomv1/
https://developer.mozilla.org/en/docs/Web/HTML/Element/template
https://www.smashingmagazine.com/2014/03/introduction-to-custom-elements/