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 24, 2013
Technology
4
350
Introducing Web Components
SmartWeb conference, 24th September 2013.
Peter Gasston
September 24, 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
370
Surveying the Landscape
stopsatgreen
4
810
Other Decks in Technology
See All in Technology
Абьюзим random_bytes(). Фёдор Кулаков, разработчик Lamoda Tech
lamodatech
0
340
Fabric + Databricks 2025.6 の最新情報ピックアップ
ryomaru0825
1
140
Understanding_Thread_Tuning_for_Inference_Servers_of_Deep_Models.pdf
lycorptech_jp
PRO
0
120
AWS CDK 実践的アプローチ N選 / aws-cdk-practical-approaches
gotok365
6
740
プロダクトエンジニアリング組織への歩み、その現在地 / Our journey to becoming a product engineering organization
hiro_torii
0
130
ひとり情シスなCTOがLLMと始めるオペレーション最適化 / CTO's LLM-Powered Ops
yamitzky
0
430
Uniadex__公開版_20250617-AIxIoTビジネス共創ラボ_ツナガルチカラ_.pdf
iotcomjpadmin
0
160
rubygem開発で鍛える設計力
joker1007
2
200
米国国防総省のDevSecOpsライフサイクルをAWSのセキュリティサービスとOSSで実現
syoshie
2
1.1k
Tech-Verse 2025 Keynote
lycorptech_jp
PRO
0
100
登壇ネタの見つけ方 / How to find talk topics
pinkumohikan
5
440
GeminiとNotebookLMによる金融実務の業務革新
abenben
0
230
Featured
See All Featured
Visualization
eitanlees
146
16k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.8k
Rebuilding a faster, lazier Slack
samanthasiow
82
9.1k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
We Have a Design System, Now What?
morganepeng
53
7.7k
Designing for Performance
lara
609
69k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Docker and Python
trallard
44
3.4k
Scaling GitHub
holman
459
140k
Git: the NoSQL Database
bkeepers
PRO
430
65k
VelocityConf: Rendering Performance Case Studies
addyosmani
330
24k
Practical Orchestrator
shlominoach
188
11k
Transcript
Introducing Web Components #Smartweb 09/13
Peter Gasston @stopsatgreen broken-links.com
Creative Technologist / Front-end lead rehabstudio.com
1. Subject to change 2. There will be code Before
we start
Web Components
The secret of Ultimate Power!
{demo}
What The Frigarui?
None
Shadow DOM
Rendered but invisible in the DOM.
None
Make your own Shadow DOM
Shadow Root DOM Host Cat Wars Etc
Shadow root var newRoot = $(foo).createShadowRoot(), newEl = '<h2>Shadow world!</h2>';
newRoot.innerHTML = newEl;
Shadow root <div id="foo"> <h1>Hello world!</h1> </div>
Shadow root <div id="foo"> <h1>Hello world!</h1> <h2>Shadow world!</h2> </div>
{demo}
Shadow DOM <h1 /> <h2 /> <div id="foo"> Real DOM
Shadow DOM Shadow Host
Shadow root var shad = newRoot.shadowRoot; shad.querySelector('h2');
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 in HTML <iframe src="foo.htm"> • Extra network requests •
Multiple rendering contexts • CORS conflicts
Web Components Better encapsulation
Web Components: a set of emerging standards aimed at making
reusable widgets.
Web Components: the biggest change to web dev since XMLHttpRequest.
Shadow DOM Templates Custom elements
Shadow DOM Templates Custom elements
Shadow DOM Templates Custom elements
Mustache & Handlebars <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>SmartWeb</h1> </div>
Templates <div id="bar"> <h1>SmartWeb</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 morning, Bucharest!</p> The content element
<div> <h2>Hello world!</h2> <p>Good morning, Bucharest!</p> </div> The content element
Templates + Shadow DOM var newRoot = $(foo).createShadowRoot(), newEl =
document.createElement('content'); newRoot.innerHTML = newEl;
Templates
<link rel="import" href="tmpls.html"> HTML Imports
Templates
Shadow DOM Templates Custom elements
Custom elements <div class="smartweb"></div>
Custom elements document.register('smart-web'); <smart-web></smart-web>
Custom elements + shadow DOM + templates <smart-web></smart-web>
Custom elements document.register('smart-web', { extends: 'button' }); <button is="smart-web">Go</button>
The element element <element name="smart-web"> <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 it.
Styling the Shadow DOM
The shadow boundary
The shadow boundary CSS
The shadow boundary CSS
.applyAuthorStyles newRoot = foo.createShadowRoot(); newRoot.applyAuthorStyles = true;
The shadow boundary CSS
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);
The part attribute <div class="foo"> #document-fragment <h2 part="apes">Shadow world!</h2> </div>
.foo::part(apes) { color: red; }
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 (variables)
body { var-highlight: #f00; } Custom properties h1 { color:
var(highlight); }
body { var-highlight: #f00; } Custom properties .foo { var-highlight:
#00f; }
Custom properties <div class="foo"> #document-fragment <style> h1 { color: var(highlight);
} </style> </div> body { var-highlight: #f00; }
The Future?
Decorators
The decorator element <template> <content /> <h2>Hello world!</h2> </template> <decorator
id="foo"> </decorator>
Decorators <h1>Front End United</h1> h1 { decorator: url(#foo); } <div>
<h2>Hello world!</h2> </div>
Shadow DOM Shadow DOM API Templates HTML imports Custom elements
Scoped styles Custom properties Browser support
86 Polymer project Polymer project
plus.google.com/+EricBidelman updates.html5rocks.com/tag/webcomponents Useful links polymer-project.org mozilla.github.io/brick customelements.io
Multumesc ’