This document discusses web component technologies including custom elements, templates, shadow DOM, HTML imports. It provides examples of how to define custom elements and use templates and shadow DOM. It also mentions some web component libraries and resources for further information.

1. WebComponents or shadow
side of the Doom
Grzegorz Wilczyński
@wilq_
Wrocław, 17.11.2014

2. But Why?

3. Four Horsemen
Custom Elements
HTML Imports
Templates
Shadow DOM

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

5. Custom Elements
<post-list>
post list
</post-list>
!
<post-list posts="{foo: 'bar'}" type="pretty">
post list with attributes
</post-list>

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

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

8. Shadow DOM

10. 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; }

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

12. Are We Componentized Yet?
X-Tags by Mozilla
Polymer by Google
Bosonic

13. Warehouse
Search Bower Packages
Component Kitchen
Custom Elements

14. 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/

15. Thank YOU