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
120
Your Reality Here
stopsatgreen
0
68
Growing Up, Getting Serious - #SotB6
stopsatgreen
1
300
Growing Up, Getting Serious
stopsatgreen
0
53
Surveying the Landscape — November 2016
stopsatgreen
1
120
Surveying the Landscape - Fronteers
stopsatgreen
2
430
The Web vs. The Browser
stopsatgreen
0
120
Surveying the Landscape Sept. 2016
stopsatgreen
1
190
Surveying the Landscape
stopsatgreen
4
600
Other Decks in Technology
See All in Technology
令和版ソフトウェアエンジニアの情報収集術 PHPカンファレンス香川2024
ysknsid25
4
840
データ基盤を支える技術
chanyou0311
5
2.9k
多言語化対応における TypeScript の型定義を通して開発のしやすさについて考えた / TSKaigi TypeScript Multilingualization
nabeliwo
2
380
TDD - Test Driven Drupal
opdavies
0
3k
DevRelによる信頼構築とデータ駆動で変わるエンジニア採用 / DevRel Trust Building to Data Driven Engineering Hiring
bobtani
1
120
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
5
38k
cgroup v2 で何が変わったのか / TechFeed Experts Night #28
tenforward
2
150
Kaggleで学ぶ系列データのための深層学習モデリング
yu4u
7
1.7k
エムスリーQAチーム紹介資料 / Introduction of M3 QA Team
m3_engineering
1
280
5分で分かる(かもしれない) Vector engine for OpenSearch Serverless
tsukuboshi
1
380
20240509 CloudWatch でいろいろなものを監視してみよう
masaruogura
1
110
AWSの生成AI入門書を執筆しました🎉
minorun365
PRO
0
130
Featured
See All Featured
How to Ace a Technical Interview
jacobian
273
22k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
41
4.5k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
104
6.7k
A designer walks into a library…
pauljervisheath
201
23k
Code Review Best Practice
trishagee
56
15k
Clear Off the Table
cherdarchuk
85
310k
Side Projects
sachag
451
41k
[RailsConf 2023] Rails as a piece of cake
palkan
28
4k
The Pragmatic Product Professional
lauravandoore
26
5.9k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
14
8.4k
Fireside Chat
paigeccino
22
2.7k
Design by the Numbers
sachag
274
18k
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