Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Introducing Web Components
Search
Peter Gasston
September 28, 2013
Technology
4
420
Introducing Web Components
Front-end London one-day event, September 2013
Peter Gasston
September 28, 2013
Tweet
Share
More Decks by Peter Gasston
See All by Peter Gasston
People Don’t Change
stopsatgreen
0
160
Your Reality Here
stopsatgreen
0
95
Growing Up, Getting Serious - #SotB6
stopsatgreen
1
340
Growing Up, Getting Serious
stopsatgreen
0
88
Surveying the Landscape — November 2016
stopsatgreen
1
170
Surveying the Landscape - Fronteers
stopsatgreen
2
480
The Web vs. The Browser
stopsatgreen
0
190
Surveying the Landscape Sept. 2016
stopsatgreen
1
390
Surveying the Landscape
stopsatgreen
4
840
Other Decks in Technology
See All in Technology
Geospatialの世界最前線を探る [2025年版]
dayjournal
1
230
能登半島災害現場エンジニアクロストーク 【JAWS FESTA 2025 in 金沢】
ditccsugii
0
890
OAuthからOIDCへ ― 認可の仕組みが認証に拡張されるまで
yamatai1212
0
130
難しいセキュリティ用語をわかりやすくしてみた
yuta3110
0
250
そのWAFのブロック、どう活かす? サービスを守るための実践的多層防御と思考法 / WAF blocks defense decision
kaminashi
0
200
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
12
80k
ガバメントクラウドの概要と自治体事例(名古屋市)
techniczna
3
240
AWSでAgentic AIを開発するための前提知識の整理
nasuvitz
2
180
Simplifying Cloud Native app testing across environments with Dapr and Microcks
salaboy
0
180
サイバーエージェント流クラウドコスト削減施策「みんなで金塊堀太郎」
kurochan
4
2k
プロダクトのコードから見るGoによるデザインパターンの実践 #go_night_talk
bengo4com
1
2.6k
物体検出モデルでシイタケの収穫時期を自動判定してみた。 #devio2025
lamaglama39
0
210
Featured
See All Featured
Agile that works and the tools we love
rasmusluckow
331
21k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
The Pragmatic Product Professional
lauravandoore
36
6.9k
Building Applications with DynamoDB
mza
96
6.7k
GraphQLの誤解/rethinking-graphql
sonatard
73
11k
Why Our Code Smells
bkeepers
PRO
340
57k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
How to train your dragon (web standard)
notwaldorf
97
6.3k
Music & Morning Musume
bryan
46
6.8k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
Into the Great Unknown - MozCon
thekraken
40
2.1k
Transcript
Introducing Web Components #FELOneDay 09/13
Peter Gasston @stopsatgreen broken-links.com
Creative Technologist / Front-end lead rehabstudio.com
1. Subject to change 2. There will be code
Web Components
The secret of Ultimate Power!
{demo}
What The FrontEndLondon?
None
Shadow DOM
Rendered but invisible in the DOM.
None
Make your own Shadow DOM
Shadow Root DOM Host Cat Wars
Shadow root var newRoot = $(foo).createShadowRoot(), newEl = '<h2>Shadow world!</h2>';
newRoot.innerHTML = newEl;
<div id="foo"> <h1>Hello world!</h1> </div> Shadow root
<div id="foo"> <h1>Hello world!</h1> <h2>Shadow world!</h2> </div> Shadow root
{demo}
Shadow DOM <h1 /> <h2 /> <div id="foo"> Real DOM
Shadow DOM Shadow Host
A DOM hidden inside the DOM.
Ultimate Power!
A problem Shadow DOM
None
.foo { color: #00f; } The problem <div class="foo"> …
</div> div.foo { color: #f00; } <div class="foo"> … </div>
The Solution Encapsulation
Encapsulation 1. It has all it needs. 2. Nothing gets
in, nothing gets out.
Encapsulation 1. We run things, things don’t run we. 2.
Don’t take nothing from nobody.
<iframe src="foo.htm"> • Extra network requests • Multiple rendering contexts
• CORS conflicts • Generally a bit shit Encapsulation
Web Components Better encapsulation
a set of emerging standards aimed at making reusable widgets.
Web Components:
the biggest change to web dev since XMLHttpRequest. Web Components:
Shadow DOM Templates Custom elements
Shadow DOM Templates Custom elements
Shadow DOM Templates Custom elements
Mustache, etc. <script id="foo" type="text/template"> <h2>Hello world!</h2> </script>
The template element <template id="foo"> <h2>Hello world!</h2> </template>
The markup is inert.
The template element <template id="foo"> <script src="foo.js"></script> <img src="foo.png"> </template>
The template element <template id="foo"> <h2>Hello world!</h2> </template> Content
The content object var clone = $(foo).content.cloneNode(true), bar = document.getElementById('bar');
bar.appendChild(clone);
Templates <div id="bar"> <h1>#FELOneDay</h1> </div>
Templates <div id="bar"> <h1>#FELOneDay</h1> <h2>Hello world!</h2> </div>
The markup is active.
Templates + Shadow DOM var newRoot = $(foo).createShadowRoot(), clone =
$(bar).content.cloneNode(true), newRoot.innerHTML = clone;
The content element <template> <div> <h2>Hello world!</h2> <content></content> </div> </template>
<p>Good afternoon, London!</p> The content element <div> <h2>Hello world!</h2> </div>
Templates + Shadow DOM var newRoot = $(foo).createShadowRoot(), el =
document.createElement('content'); newRoot.innerHTML = el;
Templates
<link rel="import" href="tmpls.html"> HTML Imports
HTML Imports var lnk = 'link[rel="import"]', impt = document.querySelector(lnk), tpl
= lnk.import.getElementById('foo'), clone = tpl.content.cloneNode(true);
HTML Imports
Shadow DOM Templates Custom elements
Custom elements <div class="frontend"></div>
Custom elements document.register('front-end'); <front-end></front-end>
Custom elements + shadow DOM + templates <front-end></front-end>
Custom elements document.register('front-end', { extends: 'button' }); <button is="front-end">Go</button>
Custom element API var fe = Object.create( HTMLElement.prototype ); fe.foo
= function() { // Something }; document.register('front-end', { prototype: fe });
The element element <element name="front-end"> <template> <style scoped>…</style> <button> #document-fragment
<div>…</div> </button> </template> </element>
Fully encapsulated & reusable
Encapsulation Reusability Portability Shadow DOM Templates Custom elements
That’s basically it.
None
Appendix A: More about Encapsulation
The shadow boundary
The shadow boundary CSS & JS
The shadow boundary CSS & JS
Shadow root var shad = newRoot.shadowRoot; shad.querySelector('h2');
The shadow boundary CSS
.applyAuthorStyles newRoot = foo.createShadowRoot(); newRoot.applyAuthorStyles = true;
The shadow boundary CSS
Pseudo-elements
Pseudo-elements <progress> <div>::-webkit-progress-bar <div>::-webkit-progress-value
{demo}
The part attribute var newRoot = el.createShadowRoot(), newEl = '<h2
part="apes">…</h2>'; newRoot.appendChild(newEl);
Show me your parts <div class="foo"> #document-fragment <h2 part="apes">Shadow world!</h2>
</div> .foo::part(apes) { color: red; }
Appendix B: Scope
<p>Hello</p> <div> <style> p { color: #f00; } </style> <p>World!</p>
</div> <p>Again</p> Scoped styles
<p>Hello</p> <div> <style scoped> p { color: #f00; } </style>
<p>World!</p> </div> <p>Again</p> Scoped styles
css = '<style>p { color: #f00; }</style>'; newRoot.appendChild(css); Shadow scope
Custom properties
(don’t call them variables)
body { var-highlight: #f00; } Custom properties h1 { color:
var(highlight); }
Custom properties .foo { var-highlight: #00f; } body { var-highlight:
#f00; }
Custom properties <div class="foo"> #document-fragment <style> h1 { color: var(highlight);
} </style> </div> body { var-highlight: #f00; }
Almost done
Shadow DOM Shadow DOM API Templates HTML imports Custom elements
Scoped styles Custom properties Browser support
87 Polymer project Polymer project
Useful links polymer-project.org updates.html5rocks.com/tag/webcomponents plus.google.com/+EricBidelman mozilla.github.io/brick customelements.io
Peter Gasston @stopsatgreen broken-links.com