Re: [WICG/webcomponents] Web components should be able to easily adapt to the host page while maintaining enapsulation (Issue #986)

@caridy @domenic It's inaccurate (even a bit dismissive) to say that everyone who has been running into these problems is trying to use WC for templating, framework-style. I've been on the side of building WC as built-in-like HTML elements for a while — these types of components are literally 99% of the components I have ever built — so you are preaching to the choir here. I’ve been pretty vocal about how it was a mistake that style ended up being baked in to WC libraries — instead they should have been blocks of functionality, encapsulating only functional CSS, and entirely themable from the outside ([most recent tweet on this](https://twitter.com/LeaVerou/status/1630274536061952000)).

And yet, I've ran into the use cases I'm describing **repeatedly**, while authoring WC with that mindset. As I mentioned in my first post, **built-in components run into these issues as well, we've just accepted that this is how things are supposed to be**. 

For example, think of the "Browse…" button in most `<input type=file>` implementations. 

<img width="192" alt="image" src="https://user-images.githubusercontent.com/175836/222182673-527711c7-a387-4ebf-a66a-c3efb7d3ac42.png">

or even the arrow buttons in `<input type=number>`:

<img width="174" alt="image" src="https://user-images.githubusercontent.com/175836/222182872-41549901-f551-4dd5-86c0-b6be5f2165e9.png">

Is the intention really for these to not inherit any `<button>` styles from the surrounding page, or just an artifact of how style encapsulation currently works?

Themable from the outside does not mean it's okay if authors have to repeat all their global styles for every single component they add, because it uses different parts for its buttons and inputs. Experimenting with a WC should not take that much work.

-- 
Reply to this email directly or view it on GitHub:
https://github.com/WICG/webcomponents/issues/986#issuecomment-1450353581

You are receiving this because you are subscribed to this thread.

Message ID: <WICG/webcomponents/issues/986/1450353581@github.com>