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
160
Your Reality Here
stopsatgreen
0
95
Growing Up, Getting Serious - #SotB6
stopsatgreen
1
340
Growing Up, Getting Serious
stopsatgreen
0
88
Surveying the Landscape — November 2016
stopsatgreen
1
170
Surveying the Landscape - Fronteers
stopsatgreen
2
480
The Web vs. The Browser
stopsatgreen
0
190
Surveying the Landscape Sept. 2016
stopsatgreen
1
390
Surveying the Landscape
stopsatgreen
4
840
Other Decks in Technology
See All in Technology
Copilot Studio ハンズオン - 生成オーケストレーションモード
tomoyasasakimskk
0
160
Oracle Autonomous AI Database:サービス概要のご紹介
oracle4engineer
PRO
2
15k
Introduction to Sansan Meishi Maker Development Engineer
sansan33
PRO
0
310
Node.js 2025: What's new and what's next
ruyadorno
0
700
混合雲環境整合異質工作流程工具運行關鍵業務 Job 的經驗分享
yaosiang
0
110
RDS の負荷が高い場合に AWS で取りうる具体策 N 連発/a-series-of-specific-countermeasures-available-on-aws-when-rds-is-under-high-load
emiki
7
4.4k
FinOps について (ちょっと) 本気出して考えてみた
skmkzyk
0
180
AI時代におけるデータの重要性 ~データマネジメントの第一歩~
ryoichi_ota
0
700
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
12
81k
Claude Codeを駆使した初めてのiOSアプリ開発 ~ゼロから3週間でグローバルハッカソンで入賞するまで~
oikon48
10
5.2k
LLMプロダクトの信頼性を上げるには?LLM Observabilityによる、対話型音声AIアプリケーションの安定運用
ivry_presentationmaterials
0
710
ソースを読むプロセスの例
sat
PRO
15
9.6k
Featured
See All Featured
Bash Introduction
62gerente
615
210k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.7k
Music & Morning Musume
bryan
46
6.9k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
Building Applications with DynamoDB
mza
96
6.7k
The World Runs on Bad Software
bkeepers
PRO
72
11k
Gamification - CAS2011
davidbonilla
81
5.5k
It's Worth the Effort
3n
187
28k
Site-Speed That Sticks
csswizardry
13
910
Side Projects
sachag
455
43k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
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 ’