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
WebComponents or shadow side of the Doom
Search
Grzegorz Wilczyński
November 17, 2014
Programming
0
48
WebComponents or shadow side of the Doom
WebComponents or shadow side of the Doom
Grzegorz Wilczyński
November 17, 2014
Tweet
Share
More Decks by Grzegorz Wilczyński
See All by Grzegorz Wilczyński
REWRITE'EM ALL
gwilczynski
2
470
Chain made out of coins - smart introduction to blockchain
gwilczynski
0
99
clean code
gwilczynski
0
130
git scm in one hour
gwilczynski
0
110
Single responsibility principle
gwilczynski
2
190
Productivity for Programmers
gwilczynski
3
200
Git branching model for TAPTeam
gwilczynski
0
920
JS design patterns
gwilczynski
6
370
Other Decks in Programming
See All in Programming
Namespace and Its Future
tagomoris
6
690
🔨 小さなビルドシステムを作る
momeemt
3
640
AI OCR API on Lambdaを Datadogで可視化してみた
nealle
0
220
Vue・React マルチプロダクト開発を支える Vite
andpad
0
110
AIコーディングAgentとの向き合い方
eycjur
0
250
TanStack DB ~状態管理の新しい考え方~
bmthd
2
420
プロポーザル駆動学習 / Proposal-Driven Learning
mackey0225
1
330
Protocol Buffersの型を超えて拡張性を得る / Beyond Protocol Buffers Types Achieving Extensibility
linyows
0
100
[FEConf 2025] 모노레포 절망편, 14개 레포로 부활하기까지 걸린 1년
mmmaxkim
0
1.4k
1から理解するWeb Push
dora1998
2
280
OSS開発者という働き方
andpad
5
1.6k
Laravel Boost 超入門
fire_arlo
2
180
Featured
See All Featured
A Tale of Four Properties
chriscoyier
160
23k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Gamification - CAS2011
davidbonilla
81
5.4k
Side Projects
sachag
455
43k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
910
Mobile First: as difficult as doing things right
swwweet
224
9.9k
GitHub's CSS Performance
jonrohan
1032
460k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.6k
KATA
mclloyd
32
14k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Transcript
WebComponents or shadow side of the Doom Grzegorz Wilczyński @wilq_
Wrocław, 17.11.2014
But Why?
Four Horsemen Custom Elements HTML Imports Templates Shadow DOM
Custom Elements <polymer-element name="post-list" extends="post-list-base" attributes="type posts"> <template> </template> </polymer-element>
Custom Elements <post-list> post list </post-list> ! <post-list posts="{foo: 'bar'}"
type="pretty"> post list with attributes </post-list>
Templates <template repeat="{{post in posts}}"> <post-card> <img src="{{post.avatar}}"> <h2>{{post.username}}</h2> <p>{{post.text}}</p>
</post-card> </template>
Templates <template> <div class="card-header" layout horizontal center> <content select="img"></content> <content
select="h2"></content> </div> <content></content> <template>
Shadow DOM
None
Shadow DOM Shadow DOM gives us DOM tree encapsulation and
style boundaries, but please don't: ! :host([data-post-status="warning"]) /deep/ #postState /deep/ #submitButton /deep/ core- icon { color: #259b24; }
HTML Imports <link rel="import" href="foo/bar.html">
Are We Componentized Yet? X-Tags by Mozilla Polymer by Google
Bosonic
Warehouse Search Bower Packages Component Kitchen Custom Elements
Sources http://webcomponents.org https://www.polymer-project.org http://pascalprecht.github.io/dont- stop-thinking-about-tomorrow/ http://jonrimmer.github.io/are-we- componentized-yet/
Thank YOU