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
130
Your Reality Here
stopsatgreen
0
80
Growing Up, Getting Serious - #SotB6
stopsatgreen
1
320
Growing Up, Getting Serious
stopsatgreen
0
71
Surveying the Landscape — November 2016
stopsatgreen
1
140
Surveying the Landscape - Fronteers
stopsatgreen
2
450
The Web vs. The Browser
stopsatgreen
0
160
Surveying the Landscape Sept. 2016
stopsatgreen
1
280
Surveying the Landscape
stopsatgreen
4
750
Other Decks in Technology
See All in Technology
地方拠点で エンジニアリングマネージャーってできるの? 〜地方という制約を楽しむオーナーシップとコミュニティ作り〜
1coin
1
130
株式会社EventHub・エンジニア採用資料
eventhub
0
4.2k
AndroidデバイスにFTPサーバを建立する
e10dokup
0
240
現場の種を事業の芽にする - エンジニア主導のイノベーションを事業戦略に装着する方法 -
kzkmaeda
2
1.5k
Data-centric AI入門第6章:Data-centric AIの実践例
x_ttyszk
1
370
5分で紹介する生成AIエージェントとAmazon Bedrock Agents / 5-minutes introduction to generative AI agents and Amazon Bedrock Agents
hideakiaoyagi
0
220
【Developers Summit 2025】プロダクトエンジニアから学ぶ、 ユーザーにより高い価値を届ける技術
niwatakeru
2
890
Postmanを使いこなす!2025年ぜひとも押さえておきたいPostmanの10の機能
nagix
2
120
プロセス改善による品質向上事例
tomasagi
1
1.6k
生成AIの利活用を加速させるための取り組み「prAIrie-dog」/ Shibuya_AI_1
visional_engineering_and_design
1
140
10分で紹介するAmazon Bedrock利用時のセキュリティ対策 / 10-minutes introduction to security measures when using Amazon Bedrock
hideakiaoyagi
0
170
室長と気ままに学ぶマイクロソフトのビジネスアプリケーションとビジネスプロセス
ryoheig0405
0
320
Featured
See All Featured
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.5k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Optimizing for Happiness
mojombo
376
70k
Building Your Own Lightsaber
phodgson
104
6.2k
Producing Creativity
orderedlist
PRO
343
39k
How GitHub (no longer) Works
holman
313
140k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
27
1.9k
Embracing the Ebb and Flow
colly
84
4.6k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
Adopting Sorbet at Scale
ufuk
74
9.2k
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