Re: [w3c/webcomponents] Theming options for shadow roots (#864)

Regarding the user land solutions: at Vaadin we do inject styles to shadow roots, 

- using [ThemableMixin](https://github.com/vaadin/vaadin-themable-mixin) with Polymer, 
- using [ThemableElement](https://github.com/vaadin/component-mixins/blob/master/packages/themable-element/themable-element.ts) with LitElement.

Another example of a user-land solution that is currently a prototype is [Stylable](https://github.com/jouni/j-elements/blob/v0.4/src/util/Stylable.js) util:

> Let components pick up matching style sheets from the global scope (document, for theming) and from the scope they are contained in (their parent shadow root, for styling).

> The matching is done using the standard media query feature. Using a custom media query makes the contained rules (either a full or partial style sheet) inert from the document so that the style rules do not end up matching unintended elements.

See also full [documentation](https://v0-4--jelements.netlify.com/util/stylable) here.

Of course this isn't something that we'd like to use in production today and we agree that (ab)using media queries for styling Shadow DOM is arguable.

@jouni would you like to share the slides from your recent presentation on this BTW?

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