Re: [WICG/webcomponents] "open-stylable" Shadow Roots (#909)

> I am not entirely sure why shadow crossing combinators have such a mindshare in this issue and keep coming up.

The answer is simple: *framework components* f.e. in React, Preact, Svelte, Vue, Solid, Angular, etc, all have this feature out of the box. We need to make the migration story from framework components to custom elements *easy* for all web developers. Cross-root selectors like `.foo .bar` are essentially required for this.



> Web Components are used to facilitate interoperability and bridge the gaps between the different tech stacks. In these use cases, "fitting-in" with existing CSS is highly desirable.

Cross-root selectors are required for this too. Currently custom elements with ShadowDOM get in the way of this, and many of the above proposed solutions are too complicated compared to framework components and global styles to be desirable.

> > I’ve said it before, but I’ll say it here for the record: making web component styling exactly like framework components would be a huge regression.
> 
> The idea isn't to make all web components stylable like light DOM, but to allow the web components author to _choose_ to make their shadow DOM-using components stylable like light DOM. The alternative is to not use shadow DOM and lose composition.

I don't think it would be a regression, but perhaps*page authors* should be able to opt into global styling, including selectors like `.foo .bar` applying across roots, and the page author is then responsible for any ensuing style conflicts.

People haven't really mentioned it, but really what cross-root selectors means is styling the *composed tree*. It is simple and reasonable to want that.

---

All frameworks today (React/Vue/Svelte/Solid/etc) have both global stylability out of the box with *cross-component* selectors, and libraries or build features/plugins that enabled component-scoped styles.

I believe we should highly consider simple solutions that make both patterns possible, and right now we already have component-scoped styles, so we really just need a simple opt-in document-level global styling solution. Maybe also component-on-down scoping (like a component's style is global for all elements below it in the composed tree).

Other proposals in this thread may still be useful to add for *better* patterns (layers, scope, etc), but they are simply too complicated for what most people need coming from frameworks.

-- 
Reply to this email directly or view it on GitHub:
https://github.com/WICG/webcomponents/issues/909#issuecomment-2013078668
You are receiving this because you are subscribed to this thread.

Message ID: <WICG/webcomponents/issues/909/2013078668@github.com>