web components. compose the web
TRANSCRIPT
![Page 1: Web components. Compose the web](https://reader036.vdocuments.site/reader036/viewer/2022062308/55c9bf17bb61ebb95a8b4739/html5/thumbnails/1.jpg)
Web componentsCompose the web
![Page 2: Web components. Compose the web](https://reader036.vdocuments.site/reader036/viewer/2022062308/55c9bf17bb61ebb95a8b4739/html5/thumbnails/2.jpg)
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
![Page 3: Web components. Compose the web](https://reader036.vdocuments.site/reader036/viewer/2022062308/55c9bf17bb61ebb95a8b4739/html5/thumbnails/3.jpg)
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.
![Page 4: Web components. Compose the web](https://reader036.vdocuments.site/reader036/viewer/2022062308/55c9bf17bb61ebb95a8b4739/html5/thumbnails/4.jpg)
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.
![Page 5: Web components. Compose the web](https://reader036.vdocuments.site/reader036/viewer/2022062308/55c9bf17bb61ebb95a8b4739/html5/thumbnails/5.jpg)
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.
![Page 6: Web components. Compose the web](https://reader036.vdocuments.site/reader036/viewer/2022062308/55c9bf17bb61ebb95a8b4739/html5/thumbnails/6.jpg)
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
![Page 7: Web components. Compose the web](https://reader036.vdocuments.site/reader036/viewer/2022062308/55c9bf17bb61ebb95a8b4739/html5/thumbnails/7.jpg)
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
![Page 8: Web components. Compose the web](https://reader036.vdocuments.site/reader036/viewer/2022062308/55c9bf17bb61ebb95a8b4739/html5/thumbnails/8.jpg)
HTML Import● http://jsbin.com/busiro/2/edit● http://jsbin.com/cejefi/2/edit
Importing an HTML element more than once is no problem.
![Page 9: Web components. Compose the web](https://reader036.vdocuments.site/reader036/viewer/2022062308/55c9bf17bb61ebb95a8b4739/html5/thumbnails/9.jpg)
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.
![Page 10: Web components. Compose the web](https://reader036.vdocuments.site/reader036/viewer/2022062308/55c9bf17bb61ebb95a8b4739/html5/thumbnails/10.jpg)
Benefits● Composition● Reusability● Interoperability
o The specs are all primitives● Clean and semantically clear DOM tree
![Page 11: Web components. Compose the web](https://reader036.vdocuments.site/reader036/viewer/2022062308/55c9bf17bb61ebb95a8b4739/html5/thumbnails/11.jpg)
Drawbacks● Browser supports
o Partial support at best for some browsers● Massively polyfill driven
o Performanceo Standard
● Documentation is still kind of rare
![Page 12: Web components. Compose the web](https://reader036.vdocuments.site/reader036/viewer/2022062308/55c9bf17bb61ebb95a8b4739/html5/thumbnails/12.jpg)
Who supports what ?
Shadow DOM
Custom Elements
Template
HTML Import
![Page 13: Web components. Compose the web](https://reader036.vdocuments.site/reader036/viewer/2022062308/55c9bf17bb61ebb95a8b4739/html5/thumbnails/13.jpg)
Polymer● Opinionated library developed by Google.● Built on top of the web components
specifications● “Sugar syntax” to develop web components.● Installable using Bower
![Page 14: Web components. Compose the web](https://reader036.vdocuments.site/reader036/viewer/2022062308/55c9bf17bb61ebb95a8b4739/html5/thumbnails/14.jpg)
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
![Page 15: Web components. Compose the web](https://reader036.vdocuments.site/reader036/viewer/2022062308/55c9bf17bb61ebb95a8b4739/html5/thumbnails/15.jpg)
Existing elementsPolymer already offers a wide range of reusaable elements: https://elements.polymer-project.org/● Core● Google● Material design● E-commerce● Animation● etc.