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
140
Your Reality Here
stopsatgreen
0
81
Growing Up, Getting Serious - #SotB6
stopsatgreen
1
320
Growing Up, Getting Serious
stopsatgreen
0
72
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
290
Surveying the Landscape
stopsatgreen
4
750
Other Decks in Technology
See All in Technology
ユーザーストーリーマッピングから始めるアジャイルチームと並走するQA / Starting QA with User Story Mapping
katawara
0
260
Visualize, Visualize, Visualize and rclone
tomoaki0705
9
68k
2.5Dモデルのすべて
yu4u
2
940
レビューを増やしつつ 高評価維持するテクニック
tsuzuki817
2
840
Swiftの “private” を テストする / Testing Swift "private"
yutailang0119
0
140
PHPで印刷所に入稿できる名札データを作る / Generating Print-Ready Name Tag Data with PHP
tomzoh
0
140
Helm , Kustomize に代わる !? 次世代 k8s パッケージマネージャー Glasskube 入門 / glasskube-entry
parupappa2929
0
270
ローカルLLMを活用したコード生成と、ローコード開発ツールへの応用
kazuhitoyokoi
0
130
EDRの検知の仕組みと検知回避について
chayakonanaika
2
680
Culture Deck
optfit
0
480
2/18/25: Java meets AI: Build LLM-Powered Apps with LangChain4j
edeandrea
PRO
0
150
速くて安いWebサイトを作る
nishiharatsubasa
14
15k
Featured
See All Featured
Documentation Writing (for coders)
carmenintech
67
4.6k
A Philosophy of Restraint
colly
203
16k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Practical Orchestrator
shlominoach
186
10k
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
Docker and Python
trallard
44
3.3k
Navigating Team Friction
lara
183
15k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
30
4.6k
For a Future-Friendly Web
brad_frost
176
9.5k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.1k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
12
980
Product Roadmaps are Hard
iamctodd
PRO
50
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 ’