Comment by dylanjha

Styling components nested inside other components can still work with either slots or scoping CSS custom properties with parent selectors.

.login-form { --button-outline-width: 2px; }

.credit-card-form { --button-outline-width: 2px; }

Of course, the component needs to be authored & documented in a way that supports this.

For example, shoelace has a "Drawer" component: https://shoelace.style/components/drawer

By default the drawer component has an "X" button in the header to close it. If you want to override that, instead of trying to style the nested "X" button you can pass in your own header actions with slot="header-actions"