In this video I do an overview on the topic of web components. I show how I created a custom element using google's polymer library.
Four main web standards discussed:
1. the template tag
http://www.html5rocks.com/en/tutorials/webcomponents/template/
2. html imports
http://www.html5rocks.com/en/tutorials/webcomponents/imports/
3. custom element javascript api
http://css-tricks.com/modular-future-web-components/
4. shadow dom
http://www.w3.org/TR/shadow-dom/
my github example (the pretty-girl element):
https://github.com/SpencerCooley/web-components-flask-example
polymer overview:
http://code.tutsplus.com/tutorials/using-polymer-to-create-web-components--cms-20475
A good tool to visualize how the shadow dom works:
http://html5-demos.appspot.com/static/shadowdom-visualizer/index.html
another good video from google developers channel on web components:
https://www.youtube.com/watch?v=fqULJBBEVQE
follow me on twitter:
https://twitter.com/spencercooley
make sure to subscribe.
I am regularly making videos. My original goal was 1 a week, but that was too hard, so now my goal is 1 video every 2 weeks.