WebComponents or shadow side of the Doom

WebComponents or shadow side of the Doom

Grzegorz Wilczyński @wilq_

Wrocław, 17.11.2014

But Why?

Four Horsemen

Custom Elements

HTML Imports

Templates

Shadow DOM

Custom Elements

<polymer-element name="post-list" extends="post-list-base" attributes="type posts"> <template> </template> </polymer-element>

Custom Elements

<post-list> post list </post-list> !

<post-list posts="{foo: 'bar'}" type="pretty"> post list with attributes </post-list>

Templates

<template repeat="{{post in posts}}"> <post-card> <img src="{{post.avatar}}"> <h2>{{post.username}}</h2> <p>{{post.text}}</p> </post-card> </template>

Templates

<template> <div class="card-header" layout horizontal center> <content select="img"></content> <content select="h2"></content> </div> <content></content> <template>

Shadow DOM

Shadow DOM

Shadow DOM gives us DOM tree encapsulation and style boundaries, but please don't: !

:host([data-post-status="warning"]) /deep/ #postState /deep/ #submitButton /deep/ core-icon { color: #259b24; }

HTML Imports

<link rel="import" href="foo/bar.html">

Are We Componentized Yet?

X-Tags by Mozilla

Polymer by Google

Bosonic

Warehouse

Search Bower Packages

Component Kitchen

Custom Elements

Sources

http://webcomponents.org

https://www.polymer-project.org

http://pascalprecht.github.io/dont-stop-thinking-about-tomorrow/

http://jonrimmer.github.io/are-we-componentized-yet/

Thank YOU