Re: [csswg-drafts] [css-scoping-1] Dynamic changes of state and attributes referenced by :host-context rules are pretty hard to handle efficiently. (#1914)

2 use cases I'd like to suggest this supports is high level theming of a suite of components, and high level right-to-left or left-to-right localization detection.

The most basic example would be setting text-direction or a theme on the html element.
`<html class="darktheme dir="rtl">...</html>`
`:host-context(".darktheme") <selector> { /*make it dark*/ }
`:host-context([dir="rtl"]) <selector> { /*invert the margin for sides, etc.*/ }
Beyond that, it would be nice to be able to sandbox a theme or text direction somewhere inside the body of a page, similar to what using an iframe can give you.

I'd advocate that a performant implementation of this selector could be viable if we limit the **legal** parents this could go on. For example, it could be limited to <html>, <body>, or the <shadowHostElement>. Introducing a limited implementation will go much farther in identifying usage numbers than simply [checking how many people use it in Chrome today](https://bugs.chromium.org/p/chromium/issues/detail?id=936225), because in professional sites browser support heavily impacts usage of any features - especially if it's not possible to polyfill them (please provide a polyfill if one exists but I've found none). This would eliminate the need to search the entire domTree for a valid selector in favor of a few targeted look ups.

-- 
GitHub Notification of comment by pr3tori4n
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/1914#issuecomment-502813875 using your GitHub account

Received on Monday, 17 June 2019 19:13:23 UTC