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
52
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
200
Make Something Great: Become an Open Source Contributor
andresgalante
0
290
How to use CSS to make your App look amazing and be accessible on any device
andresgalante
0
59
Open source - JUG BA
andresgalante
0
64
Open source - QCon19
andresgalante
0
96
CSS - Media queries o tamanho não importa
andresgalante
0
77
Cosmos
andresgalante
0
98
PatternFly 4 variable system
andresgalante
0
99
Open source
andresgalante
3
81
Other Decks in Technology
See All in Technology
"プロポーザルってなんか怖そう"という境界を超えてみた@TSUDOI by giftee Tech #1
shilo113
0
170
AIAgentの限界を超え、 現場を動かすWorkflowAgentの設計と実践
miyatakoji
1
160
業務効率化をさらに加速させる、ノーコードツールとStep Functionsのハイブリッド化
smt7174
2
110
20201008_ファインディ_品質意識を育てる役目は人かAIか___2_.pdf
findy_eventslides
2
590
extension 現場で使えるXcodeショートカット一覧
ktombow
0
220
「れきちず」のこれまでとこれから - 誰にでもわかりやすい歴史地図を目指して / FOSS4G 2025 Japan
hjmkth
1
210
能登半島災害現場エンジニアクロストーク 【JAWS FESTA 2025 in 金沢】
ditccsugii
0
230
生成AIで「お客様の声」を ストーリーに変える 新潮流「Generative ETL」
ishikawa_satoru
1
370
Modern_Data_Stack最新動向クイズ_買収_AI_激動の2025年_.pdf
sagara
0
240
Simplifying Cloud Native app testing across environments with Dapr and Microcks
salaboy
0
130
自動テストのコストと向き合ってみた
qa
0
210
社内お問い合わせBotの仕組みと学び
nish01
1
530
Featured
See All Featured
Practical Orchestrator
shlominoach
190
11k
Designing for Performance
lara
610
69k
Done Done
chrislema
185
16k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
Designing Experiences People Love
moore
142
24k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
9
590
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
RailsConf 2023
tenderlove
30
1.2k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
189
55k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
19
1.2k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
45
2.5k
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 :)