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
150
Your Reality Here
stopsatgreen
0
86
Growing Up, Getting Serious - #SotB6
stopsatgreen
1
340
Growing Up, Getting Serious
stopsatgreen
0
86
Surveying the Landscape — November 2016
stopsatgreen
1
150
Surveying the Landscape - Fronteers
stopsatgreen
2
470
The Web vs. The Browser
stopsatgreen
0
180
Surveying the Landscape Sept. 2016
stopsatgreen
1
360
Surveying the Landscape
stopsatgreen
4
810
Other Decks in Technology
See All in Technology
Agentic Workflowという選択肢を考える
tkikuchi1002
1
480
製造業からパッケージ製品まで、あらゆる領域をカバー!生成AIを利用したテストシナリオ生成 / 20250627 Suguru Ishii
shift_evolve
PRO
1
130
VISITS_AIIoTビジネス共創ラボ登壇資料.pdf
iotcomjpadmin
0
160
より良いプロダクトの開発を目指して - 情報を中心としたプロダクト開発 #phpcon #phpcon2025
bengo4com
1
3.1k
Windows 11 で AWS Documentation MCP Server 接続実践/practical-aws-documentation-mcp-server-connection-on-windows-11
emiki
0
920
Liquid Glass革新とSwiftUI/UIKit進化
fumiyasac0921
0
180
Observability infrastructure behind the trillion-messages scale Kafka platform
lycorptech_jp
PRO
0
140
CI/CD/IaC 久々に0から環境を作ったらこうなりました
kaz29
1
160
急成長を支える基盤作り〜地道な改善からコツコツと〜 #cre_meetup
stefafafan
0
120
GitHub Copilot の概要
tomokusaba
1
130
5min GuardDuty Extended Threat Detection EKS
takakuni
0
120
Node-RED × MCP 勉強会 vol.1
1ftseabass
PRO
0
140
Featured
See All Featured
Building Adaptive Systems
keathley
43
2.6k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Producing Creativity
orderedlist
PRO
346
40k
4 Signs Your Business is Dying
shpigford
184
22k
Rails Girls Zürich Keynote
gr2m
94
14k
GitHub's CSS Performance
jonrohan
1031
460k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Agile that works and the tools we love
rasmusluckow
329
21k
Done Done
chrislema
184
16k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
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