Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Styling the Shadow Dom
Andres Galante
September 26, 2016
Technology
0
34
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
160
Make Something Great: Become an Open Source Contributor
andresgalante
0
83
How to use CSS to make your App look amazing and be accessible on any device
andresgalante
0
32
Open source - JUG BA
andresgalante
0
20
Open source - QCon19
andresgalante
0
66
CSS - Media queries o tamanho não importa
andresgalante
0
21
Cosmos
andresgalante
0
33
PatternFly 4 variable system
andresgalante
0
49
Open source
andresgalante
3
65
Other Decks in Technology
See All in Technology
Learning to Solve Hard Minimal Problems
takmin
1
290
AWS CLI でやってみる ~ AWS Hands-on for Beginners ECS ハンズオン ~
kentosuzuki
1
370
Red Hat Partner Training Portal のご紹介 / Red Hat Partner Training Portal Introduction
rhpej
0
110
A3-1 IBM Championが本音で語る「IBM Cloud」
kolinz
0
300
SPAとWebアプリケーションでCognitoの使い方はどう変わるのか? / How do we use cognito with SPA and web applications?
kitano_yuichi
0
370
〇〇みたいな検索作ってと言われたときに考えること / thinking before developing search system like that one
ryook
5
2.6k
ECS on EC2 で Auto Scaling やってみる!
sayjoy
1
120
最先端の生成AIから考える、ビジネスにおける10年後のパラダイムシフト
sbtechnight
1
310
ECS Fargate+Mackerelにおける監視費用を削減するまでの話
nulabinc
PRO
1
340
ログラスを支える技術的投資の仕組み / loglass-technical-investment
urmot
9
1.9k
IBM Cloud Festa Online 2022 Summer
1ftseabass
PRO
0
190
Istioを活用したセキュアなマイクロサービスの実現/Secure Microservices with Istio
ido_kara_deru
3
390
Featured
See All Featured
Dealing with People You Can't Stand - Big Design 2015
cassininazir
351
21k
Producing Creativity
orderedlist
PRO
334
37k
What's new in Ruby 2.0
geeforr
335
30k
jQuery: Nuts, Bolts and Bling
dougneiner
56
6.4k
How To Stay Up To Date on Web Technology
chriscoyier
780
250k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
655
120k
How GitHub (no longer) Works
holman
297
140k
Fontdeck: Realign not Redesign
paulrobertlloyd
73
4.1k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
21
1.4k
Designing with Data
zakiwarfel
91
4k
Designing Experiences People Love
moore
130
22k
The Straight Up "How To Draw Better" Workshop
denniskardys
225
120k
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 :)