web components. compose the web
TRANSCRIPT
Web componentsCompose the web
What are web components ?
4 specifications:● Shadow DOM● Custom Elements● Template● HTML Import
Most of today’s content: https://www.youtube.com/watch?v=6vcQlD-jadk
Shadow DOMLet us begin with an example:● http://jsbin.com/gajuqi/4/edit
o Large DOM tree even though we are trying to compose our page.
● http://jsbin.com/hivifoh/2/edito The component is now encapsulated in its own
subtree.
Shadow DOM: Scoping● http://jsbin.com/wimomu/6/edit
o The CSS is broken.o Classic solution: write very specific CSS selectors
and/or add more classes.● http://jsbin.com/sipuqe/7/edit
o The subtree is encapsulated.o Nothing leaks in, nothing leaks out.
Custom elements● Take a look back to:
http://jsbin.com/sipuqe/7/edito It is tedious to add a class everywhere we want the
component.● Just tell HTML you are extending it:
http://jsbin.com/beqako/7/edito Your custom tag (or element) is now a known
element.
Custom elements● They are already there in many libraries and
frameworks:o Angular directiveso Knockout componentso Ember components
● It begins to be or already is intuitive to developers
Template● A new HTML tag● Does absolutely… nothing.
o It already parsedo Waits to be used.
● http://jsbin.com/ragecu/2/edito No special computationo Query it like any other html tag
HTML Import● http://jsbin.com/busiro/2/edit● http://jsbin.com/cejefi/2/edit
Importing an HTML element more than once is no problem.
Web components good practices
● Do one thing and do it well.● Be composable.● Think small.● Be styleable.● Attributes for data in; Events for data out.
Benefits● Composition● Reusability● Interoperability
o The specs are all primitives● Clean and semantically clear DOM tree
Drawbacks● Browser supports
o Partial support at best for some browsers● Massively polyfill driven
o Performanceo Standard
● Documentation is still kind of rare
Who supports what ?
Shadow DOM
Custom Elements
Template
HTML Import
Polymer● Opinionated library developed by Google.● Built on top of the web components
specifications● “Sugar syntax” to develop web components.● Installable using Bower
Anatomy of a basic polymer element<dom-module id="dom-element">
<template>
<p>I'm a DOM element. This is my local DOM!</p>
</template>
</dom-module>
<script>
Polymer({
is: "dom-element",
});
</script>
https://www.polymer-project.org/1.0/docs/start/quick-tour.html
https://www.polymer-project.org/0.5/docs/polymer/polymer.html
Existing elementsPolymer already offers a wide range of reusaable elements: https://elements.polymer-project.org/● Core● Google● Material design● E-commerce● Animation● etc.