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
41
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
170
How to use CSS to make your App look amazing and be accessible on any device
andresgalante
0
44
Open source - JUG BA
andresgalante
0
42
Open source - QCon19
andresgalante
0
78
CSS - Media queries o tamanho não importa
andresgalante
0
53
Cosmos
andresgalante
0
72
PatternFly 4 variable system
andresgalante
0
76
Open source
andresgalante
3
73
Other Decks in Technology
See All in Technology
長期間TiDBを使ってきた話 @ 私たちはなぜNewSQLを使うのかTiDB選定5社が語る選定理由と活用LT / Experiences with TiDB Over Time
chibiegg
2
900
ワールドカフェI /チューターを改良する / World Café I and Improving the Tutors
ks91
PRO
0
120
ServiceNow Knowledge Learning Rise up
manarobot
0
210
AWSに詳しくない人でも始められるコスト最適化ガイド
yuhta28
1
240
LayerXにおけるLLMプロダクト開発の今までとこれから
layerx
PRO
1
350
[新卒向け研修資料] テスト文字列に「うんこ」と入れるな(2024年版)
infiniteloop_inc
4
15k
Java EE/Jakarta EEの現状と将来―クラウドネイティブ時代にJava EEは対応できるのか?―
takakiyo
1
160
現代CSSフレームワークの内部実装とその仕組み
poteboy
7
3.6k
家族アルバム みてねにおけるGrafana活用術 / Grafana Meetup Japan Vol.1 LT
isaoshimizu
1
760
Google Cloud Next '24 Recap(Cloud Run/k8s)
mokocm
0
230
検証を通して見えてきたTiDBの性能特性
lycorptech_jp
PRO
6
3.8k
JSON攻略法.pdf
miyakemito
8
5.1k
Featured
See All Featured
Fireside Chat
paigeccino
21
2.6k
Documentation Writing (for coders)
carmenintech
60
3.9k
A Philosophy of Restraint
colly
197
16k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
7
1k
Designing the Hi-DPI Web
ddemaree
276
33k
The Brand Is Dead. Long Live the Brand.
mthomps
49
29k
The Power of CSS Pseudo Elements
geoffreycrofte
60
5k
We Have a Design System, Now What?
morganepeng
43
6.8k
Producing Creativity
orderedlist
PRO
337
39k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
9
8.3k
Done Done
chrislema
178
15k
Building Your Own Lightsaber
phodgson
99
5.7k
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 :)