polymer
Layers of Polymer
Elements
Reusable custom elements
Polymer
Opinionated way to work
Native
Current browser landscape
Platform
Web component polyfills
<video width = "320" Height="240" controls>
<source src="movie.mp4" type="video/mp4">
</video>
<video width = "320" Height="240" controls>
#shadow-root (user-agent)
<div>
<div>
<div>
<input type="button">
#shadow-root (user-agent)
</input>
<input type="range" step="any" max="12.612">
#shadow-root (user-agent)
<div>
<div pseudo="-webkit-slider-runable-track" id="track">
<div id="thumb"></div>
</div>
</div>
</input>
<div style="display: none;">0:00</div>
<div>0:12</div>
<input type="button">
#shadow-root (user-agent)
</input>
<input type="range" step="any" max="1" style>
#shadow root (user-agent)
<div>
<div pseudo="-webkit-slider-runnable-track" id="track">
<div id="thumb"></div>
</div>
</div>
</input>
<input type="button" style="display: none;">
#shadow-root (user-agent)
</input>
</div>
</div>
</div>
<source src="movie.mp4" type="video/mp4">
</video>
.Web Components
- Collection of standards outlined by the W3C
- Allow us to bundle markup and styles into custom HTML elements
- Fully encapsulate all of their HTML and CSS
Every
thing
is an
element
Resources
- Yo Polymer! (generator
- www.polymer-project.org
- github.com/polymer
- customelements.io/