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.