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
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
Postmanを使いこなす!2025年ぜひとも押さえておきたいPostmanの10の機能
nagix
2
120
バックエンドエンジニアのためのフロントエンド入門 #devsumiC
panda_program
16
6.5k
Kubernetes x k6 で負荷試験基盤を開発して 負荷試験を民主化した話 / Kubernetes x k6
sansan_randd
2
730
『AWS Distinguished Engineerに学ぶ リトライの技術』 #ARC403/Marc Brooker on Try again: The tools and techniques behind resilient systems
quiver
0
130
Platform Engineeringは自由のめまい
nwiizo
4
1.9k
SCSAから学ぶセキュリティ管理
masakamayama
0
140
プロセス改善による品質向上事例
tomasagi
1
1.6k
地方拠点で エンジニアリングマネージャーってできるの? 〜地方という制約を楽しむオーナーシップとコミュニティ作り〜
1coin
1
130
5分で紹介する生成AIエージェントとAmazon Bedrock Agents / 5-minutes introduction to generative AI agents and Amazon Bedrock Agents
hideakiaoyagi
0
220
データ資産をシームレスに伝達するためのイベント駆動型アーキテクチャ
kakehashi
PRO
2
230
アジャイル開発とスクラム
araihara
0
160
High Performance PHP
cmuench
0
140
Featured
See All Featured
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
Typedesign – Prime Four
hannesfritz
40
2.5k
Building Adaptive Systems
keathley
40
2.4k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
540
Measuring & Analyzing Core Web Vitals
bluesmoon
6
240
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.5k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Visualization
eitanlees
146
15k
Adopting Sorbet at Scale
ufuk
74
9.2k
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 ’