[dylanjha]

> think there is a clear tension between the component desire for encapsulation vs the web designer wanting to impose their styling on the nested components

This is the inherent tension. It requires good web component authoring to expose:

1. `part`s that can be accessed by application-level CSS

2. slots for the application developer to inject html

3. CSS custom properties (--variable) -- these pierce the shadow DOM

The web component authors have to be very intentional about these things. There are good examples and bad examples and I think people are still learning how to do this well.

[fidotron]

Isn’t the problem that this is recursive? i.e. if you use a component which itself contains a component that contains a button and that button should be styled should the intermediate components be worrying about it? And does the end consuming application need to care when new widgets are added to components nested two deep?

It is almost like the need for styling necessitates all the old dependency injection and factory gunk that older frameworks became notorious for.

[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"