Web Components
Web components
- Set of evolving standards
- They allow you to extend HTML and modularize your page components
- Broadly broken down into:
- Templates
- Shadow DOM
- Custom Elements
- HTML Imports
But compatibility?
templates
- Allows you to store markup on the page which you can later clone or reuse.
- Works like Mustache/Handlebars templates
TEMPLATES
SHADOW DOM
- Allows you to encapsulate a component-specific markup
- Not visible to the user and not accessible via DOM queries
- The "Shadow Host" contains a "Shadow Root" within a "Shadow Boundary"
shadow dom
EVER WONDERED HOW
<VIDEO>
TAG WORKED?
SHADOW DOM
custom elements
- Allows you to create new HTML elements.
- Its prototype extends HTMLElement
- Element must contain a hyphen in it
- <x-blink>
- <my-xkcd>
- <google-map>
CUSTOM ELEMENTS
custom elements
custom elements
custom elements
custom elements
custom elements
custom elements
custom elements - polyfills
custom elements - polymer
POLYMER is a library that uses the latest
WEB TECHNOLOGIES to let you, create
CUSTOM ELEMENTS
polymer
polymer
polymer
polymer
polymer - demo
Web Components
By jaisanth
