Contact emails alma...@microsoft.com<mailto:alma...@microsoft.com>
Explainer None Specification https://drafts.csswg.org/selectors-4 Summary Add support for matching the :host(:has()) selector combination, allowing authors to select the host element if it has a descendent in the light DOM matching a provided relative selector list. Chromium already supports the :host:has() variant, which is similar to :host(:has()), but instead checks against descendants in the shadow DOM. Blink component Blink>CSS<https://issues.chromium.org/issues?q=customfield1222907:%22Blink%3ECSS%22> Motivation Web authors who utilize Shadow DOM would like a way to style the shadow host if one of its descendants matches a selector (using the :has() functional pseudo-class). For example, authors would like :host(:has(input:checked)) to match the :host if it has a light DOM descendant matching input:checked. The following test case illustrates an author using a combination of :host() and :has(). This test case already works in Firefox and Safari. https://lit.dev/playground/#gist=1115384b101b8a90aef8fef5149115e6 Initial public proposal None Search tags :host<https://chromestatus.com/features#tags::host>, :has<https://chromestatus.com/features#tags::has>, :host()<https://chromestatus.com/features#tags::host()>, :has()<https://chromestatus.com/features#tags::has()>, :host:has()<https://chromestatus.com/features#tags::host:has()>, :host:has<https://chromestatus.com/features#tags::host:has>, :host(:has())<https://chromestatus.com/features#tags::host(:has())>, selector<https://chromestatus.com/features#tags:selector> TAG review None TAG review status Not applicable Risks Interoperability and Compatibility No major risks as full/partial support for :host(:has()) already exists in other browsers. Gecko: Shipped/Shipping WebKit: Shipped/Shipping Web developers: Positive (https://github.com/w3c/csswg-drafts/issues/7953) WebView application risks Does this intent deprecate or change behavior of existing APIs, such that it has potentially high risk for Android WebView-based applications? None Debuggability DevTools already provides support for exposing CSS selectors and computed styles. Is this feature fully tested by web-platform-tests<https://chromium.googlesource.com/chromium/src/+/main/docs/testing/web_platform_tests.md>? Yes https://wpt.fyi/results/css/css-scoping?label=master&label=experimental&aligned&q=host%20has-0 Finch feature name CSSNestHostHasSelectors Requires code in //chrome? False Tracking bug https://issues.chromium.org/issues/40062355 Link to entry on the Chrome Platform Status https://chromestatus.com/feature/5658105834373120?gate=5256965787484160 This intent message was generated by Chrome Platform Status<https://chromestatus.com/>. -- You received this message because you are subscribed to the Google Groups "blink-dev" group. To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+unsubscr...@chromium.org. To view this discussion visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/LV3PR00MB23181D67FBE624F9AE4A77CFBFCA2%40LV3PR00MB2318.namprd00.prod.outlook.com.
