Not knowing what does and doesn’t have a part is huge. In React, you can use normal CSS to target anything normally. Why not with Web Components too?

With great power comes great responsibility. 🙂

I remember this! I think we need something similar, but with more control like the idea here.

Hey Um! Although that’s a great workaround for now, the ideal native solution would not require any JavaScript, only HTML and CSS.

These solutions were removed because they felt way too powerful (and possibly performance? I don’t recall exactly..)

Right now it is designed to give component authors control. My take on that is if a component consumer is desperate enough they will always find a way, it’s what programmers do. I prefer keeping things flexible and it feels like the main thing holding webcomponents back is not being able to style their shadow DOMs. CSS frameworks or just using external global stylesheets (think Tailwind) also just isn’t compatible with the idea and design of shadow DOM, I think Justin Fagnani’s open stylable proposal tackles that use case as well whereas a penetrating shadow selector does not, so I feel like that idea should be considered too.. still opt-in for component authors but perhaps should have a “danger hatch” for consumers to make it open?

In any case, hopefully people start using more light DOM with web components anyways, obviating the need for something like this.

Beyond changing the distributed component code I do not believe web components easily allow mode switching. This is purposeful because the nested children may not be rendered or used in the same way as the plain html shows.

For example a list component may just have a single ul in the dom but jump across the shadow boundary and that list could be rendered inside a data tables setup with some other magic sauce added. This could work on the regular dom but leveraging the shadow dom allows non-destructive updates. (Changing the list without updating the original or the reverse. Data manipulation that updates the existing dom list)

Web component styling is still a giant pain for no reason though. There are work arounds but the encapsulation is too aggressive. It causes more pain than what it solves.

I don’t understand.

Just not a fan of ::part. It’s fake CSS. You can’t do ::part > h3. You can’t do ::part:checked. You have to document what has a part and what doesn’t so any consumer can find it. It’s not a real styling solution.