Deep Styling Shadow DOM
After seeing the ability to style Light DOM, it's tempting to want to style the Shadow DOM with a "deep" selector, one that tries to reach inside the custom element.
html
<custom-alert>
<p>This is Light DOM</p>
---------Shadow Boundary----------
| <img src="path/to/icon.svg"/> |
| <slot></slot> |
| <button>Close</button> |
----------------------------------
</custom-alert><custom-alert>
<p>This is Light DOM</p>
---------Shadow Boundary----------
| <img src="path/to/icon.svg"/> |
| <slot></slot> |
| <button>Close</button> |
----------------------------------
</custom-alert>However, using a selector like:
css
/* This doesn't work */
custom-alert button {
background: red!important;
}/* This doesn't work */
custom-alert button {
background: red!important;
}No matter how hard you try, you're not able to pierce the Shadow DOM with this selector.