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
急成長する企業で作った、エンジニアが輝ける制度/ 20250214 Rinto Ikenoue
shift_evolve
2
880
君はPostScriptなウィンドウシステム 「NeWS」をご存知か?/sunnews
koyhoge
0
720
開発者が自律的に AWS Security Hub findings に 対応する仕組みと AWS re:Invent 2024 登壇体験談 / Developers autonomously report AWS Security Hub findings Corresponding mechanism and AWS re:Invent 2024 presentation experience
kaminashi
0
190
『衛星データ利用の方々にとって近いようで触れる機会のなさそうな小話 ~ 衛星搭載ソフトウェアと衛星運用ソフトウェア (実物) を動かしながらわいわいする編 ~』 @日本衛星データコミニティ勉強会
meltingrabbit
0
120
データ基盤の成長を加速させる:アイスタイルにおける挑戦と教訓
tsuda7
3
650
PL900試験から学ぶ Power Platform 基礎知識講座
kumikeyy
0
110
Developer Summit 2025 [14-D-1] Yuki Hattori
yuhattor
19
5.1k
マルチモーダル理解と生成の統合 DeepSeek Janus, etc... / Multimodal Understanding and Generation Integration
hiroga
0
360
Developers Summit 2025 浅野卓也(13-B-7 LegalOn Technologies)
legalontechnologies
PRO
0
150
生成AIの利活用を加速させるための取り組み「prAIrie-dog」/ Shibuya_AI_1
visional_engineering_and_design
1
140
The 5 Obstacles to High-Performing Teams
mdalmijn
0
270
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
6
57k
Featured
See All Featured
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
The Cult of Friendly URLs
andyhume
78
6.2k
GitHub's CSS Performance
jonrohan
1030
460k
Unsuck your backbone
ammeep
669
57k
Raft: Consensus for Rubyists
vanstee
137
6.8k
Done Done
chrislema
182
16k
The Invisible Side of Design
smashingmag
299
50k
Testing 201, or: Great Expectations
jmmastey
41
7.2k
Scaling GitHub
holman
459
140k
How to Think Like a Performance Engineer
csswizardry
22
1.3k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
400
Why Our Code Smells
bkeepers
PRO
335
57k
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