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/
Upload your 360° photos and create a virtual tour in minutes without programming skills.
