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
93
Growing Up, Getting Serious - #SotB6
stopsatgreen
1
340
Growing Up, Getting Serious
stopsatgreen
0
86
Surveying the Landscape — November 2016
stopsatgreen
1
160
Surveying the Landscape - Fronteers
stopsatgreen
2
480
The Web vs. The Browser
stopsatgreen
0
190
Surveying the Landscape Sept. 2016
stopsatgreen
1
380
Surveying the Landscape
stopsatgreen
4
830
Other Decks in Technology
See All in Technology
なぜスクラムはこうなったのか?歴史が教えてくれたこと/Shall we explore the roots of Scrum
sanogemaru
5
1.6k
テストを軸にした生き残り術
kworkdev
PRO
0
210
研究開発と製品開発、両利きのロボティクス
youtalk
1
530
MCPで変わる Amebaデザインシステム「Spindle」の開発
spindle
PRO
3
3.3k
大「個人開発サービス」時代に僕たちはどう生きるか
sotarok
20
10k
💡Ruby 川辺で灯すPicoRubyからの光
bash0c7
0
120
「全員プロダクトマネージャー」を実現する、Cursorによる仕様検討の自動運転
applism118
21
11k
Autonomous Database - Dedicated 技術詳細 / adb-d_technical_detail_jp
oracle4engineer
PRO
4
10k
「何となくテストする」を卒業するためにプロダクトが動く仕組みを理解しよう
kawabeaver
0
410
20250913_JAWS_sysad_kobe
takuyay0ne
2
220
S3アクセス制御の設計ポイント
tommy0124
3
200
La gouvernance territoriale des données grâce à la plateforme Terreze
bluehats
0
180
Featured
See All Featured
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Making Projects Easy
brettharned
117
6.4k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.1k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
4 Signs Your Business is Dying
shpigford
184
22k
Gamification - CAS2011
davidbonilla
81
5.4k
We Have a Design System, Now What?
morganepeng
53
7.8k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
13k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Context Engineering - Making Every Token Count
addyosmani
3
48
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 ’