Menu
I have css from parent application that I want to use inside a web-component made by shadow dom. I don't want to copy css from parent aplication to web-component, but right now, the web-component can't see the parent application css, how can I do that?
parent app:
<style>
.pretty-button {
color: green
}
</style>
<body>
<button class="pretty-button">Got It</button>
<custom-element></custom-element>
</body>
web-component made by shadow dom:
<!--doesn't work because the shadow dom can't use parent css class-->
<body>
<button class="pretty-button">Got it from shadow dom</button>
</body>
782
asked Sep 20 '25 05:09
Shadow DOM is protected from outside CSS. This is by design.
TL;DR:
If you want the outside CSS to affect DOM inside the shadowRoot of a custom element then you need to either:
<slot> orHere are three answers I have given on similar questions:
162
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
