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
OCI Network Firewall 概要
oracle4engineer
PRO
1
7.8k
extension 現場で使えるXcodeショートカット一覧
ktombow
0
220
三菱電機・ソニーグループ共同の「Agile Japan企業内サテライト」_2025
sony
0
120
いまさら聞けない ABテスト入門
skmr2348
1
230
Optuna DashboardにおけるPLaMo2連携機能の紹介 / PFN LLM セミナー
pfn
PRO
2
940
リーダーになったら未来を語れるようになろう/Speak the Future
sanogemaru
0
360
【Oracle Cloud ウェビナー】クラウド導入に「専用クラウド」という選択肢、Oracle AlloyとOCI Dedicated Region とは
oracle4engineer
PRO
3
120
from Sakichi Toyoda to Agile
kawaguti
PRO
1
110
KMP の Swift export
kokihirokawa
0
350
Wasmのエコシステムを使った ツール作成方法
askua
0
100
Developer Advocate / Community Managerなるには?
tsho
0
110
Git in Team
kawaguti
PRO
2
330
Featured
See All Featured
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
GraphQLの誤解/rethinking-graphql
sonatard
73
11k
How to Ace a Technical Interview
jacobian
280
24k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
Code Review Best Practice
trishagee
72
19k
Git: the NoSQL Database
bkeepers
PRO
431
66k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
32
2.3k
Facilitating Awesome Meetings
lara
56
6.6k
Statistics for Hackers
jakevdp
799
220k
The Art of Programming - Codeland 2020
erikaheidi
56
14k
4 Signs Your Business is Dying
shpigford
185
22k
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 :)