3 ms·

Maybe I am missing what you mean, but I think there is a clear tension between the component desire for encapsulation vs the web designer wanting to impose thei

Maybe I am missing what you mean, but I 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. I wonder if that is the true reason OLE type systems have failed on the web, as there aren’t enough agreed upon preexisting widgets for it not to descend into an inconsistent horror show.

dylanjha 3y ago
> 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 3y ago
  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 3y ago
    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 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"
j-bos 3y ago
Yes, that hits the nail on the head, the tension between encapsulation and access.

dylanjha 3y ago

> 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 3y ago
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 3y ago
  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 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"

j-bos 3y ago

Yes, that hits the nail on the head, the tension between encapsulation and access.