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
49
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
100
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
CSC305 Lecture 01
javiergs
PRO
1
380
CSC509 Lecture 02
javiergs
PRO
0
370
Things You Thought You Didn’t Need To Care About That Have a Big Impact On Your Job
hollycummins
0
210
ててべんす独演会〜Flowの全てを語ります〜
tbsten
1
210
GitHub Actions × AWS OIDC連携の仕組みと経緯を理解する
ota1022
0
170
GraphQL×Railsアプリのデータベース負荷分散 - 月間3,000万人利用サービスを無停止で
koxya
1
620
Breaking Up with Big ViewModels — Without Breaking Your Architecture (droidcon Berlin 2025)
steliosf
PRO
1
200
iOSDC.pdf
chronos2500
2
570
議事録の要点整理を自動化! サーバレス Bot 構築術
penpeen
3
1.5k
エンジニアとして高みを目指す、 利益を生み出す設計の考え方 / design-for-profit
minodriven
17
9.8k
Build your own WebP codec in Swift
kishikawakatsumi
2
620
AIで開発生産性を上げる個人とチームの取り組み
taniigo
0
110
Featured
See All Featured
Rails Girls Zürich Keynote
gr2m
95
14k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
GraphQLの誤解/rethinking-graphql
sonatard
72
11k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
How to Think Like a Performance Engineer
csswizardry
27
2k
Context Engineering - Making Every Token Count
addyosmani
3
120
Statistics for Hackers
jakevdp
799
220k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Designing for humans not robots
tammielis
254
25k
Automating Front-end Workflow
addyosmani
1371
200k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.1k
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