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
Styling the Shadow Dom
Search
Andres Galante
September 26, 2016
Technology
0
50
Styling the Shadow Dom
Tiangle JS meetup talk about how to style the shadow DOM
Andres Galante
September 26, 2016
Tweet
Share
More Decks by Andres Galante
See All by Andres Galante
Make Something Great! Become an Open Source Contributor
andresgalante
0
190
Make Something Great: Become an Open Source Contributor
andresgalante
0
280
How to use CSS to make your App look amazing and be accessible on any device
andresgalante
0
55
Open source - JUG BA
andresgalante
0
58
Open source - QCon19
andresgalante
0
91
CSS - Media queries o tamanho não importa
andresgalante
0
70
Cosmos
andresgalante
0
92
PatternFly 4 variable system
andresgalante
0
94
Open source
andresgalante
3
80
Other Decks in Technology
See All in Technology
United airlines®️ USA Contact Numbers: Complete 2025 Support Guide
unitedflyhelp
0
330
スタートアップに選択肢を 〜生成AIを活用したセカンダリー事業への挑戦〜
nstock
0
250
CRE Camp #1 エンジニアリングを民主化するCREチームでありたい話
mntsq
1
140
事業成長の裏側:エンジニア組織と開発生産性の進化 / 20250703 Rinto Ikenoue
shift_evolve
PRO
3
22k
PO初心者が考えた ”POらしさ”
nb_rady
0
220
データ基盤からデータベースまで?広がるユースケースのDatabricksについて教えるよ!
akuwano
3
130
対話型音声AIアプリケーションの信頼性向上の取り組み
ivry_presentationmaterials
1
280
AI専用のリンターを作る #yumemi_patch
bengo4com
6
4.3k
インフラ寄りSREの生存戦略
sansantech
PRO
5
1.6k
united airlines ™®️ USA Contact Numbers: Complete 2025 Support Guide
flyunitedhelp
1
420
オーティファイ会社紹介資料 / Autify Company Deck
autifyhq
10
130k
高速なプロダクト開発を実現、創業期から掲げるエンタープライズアーキテクチャ
kawauso
3
9.6k
Featured
See All Featured
What's in a price? How to price your products and services
michaelherold
246
12k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
YesSQL, Process and Tooling at Scale
rocio
173
14k
RailsConf 2023
tenderlove
30
1.1k
Documentation Writing (for coders)
carmenintech
72
4.9k
A designer walks into a library…
pauljervisheath
207
24k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
4 Signs Your Business is Dying
shpigford
184
22k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Being A Developer After 40
akosma
90
590k
Transcript
@andresgalante Shadow Dom
None
Shadow Dom
Heads Up
1. Never trust an Argentinean designer writing code.
1. Never trust an Argentinean designer writing code.
2. I am a Shadow Dom rookie
Shadow Dom
Custom elements + Shadow DOM = Self contained HTML, CSS
and JS
None
None
CSS
The Shadow DOM
The ShadowRoot A shadow root is a document fragment that
gets attached to a “host” element.
Light DOM + Shadow DOM = Composed DOM
<slot> Placeholders inside your component that users can fill with
their own markup.
How to style the ShadowDOM
None
None
None
None
None
CSS selectors from the outer page don’t apply inside your
component. Styles defined inside don’t bleed out. They’re scoped to the host element.
:host(<selector>) selector Allows you to target the host if it
matches a <selector>.
::host-context(<selector>) selector Matches the component if it or any of
its ancestors matches <selector>.
:slotted(<compound-selector>) selector Matches nodes that are distributed into a <slot>
Styling a component from the outside.
Style hooks using CSS custom properties CSS variables and mixins
Access Card Demo Putting everything together
None
Can we use it?
maybe
Thanks :)