*Contact emails* [email protected] *Specification* https://drafts.csswg.org/css-conditional-5/#container-name
*Summary* Ignore tree-scope when matching container-name for @container queries. Previously, container-name matching for container queries used tree-scoped names/references for matching, which meant the same name would not match if the @container rule and the container-type property were originating from different trees such that that container-type declaration came from an inner shadow tree. With this change container names match regardless of @container rule or container-type declaration origins. *Blink component* Blink>CSS <https://issues.chromium.org/issues?q=customfield1222907:%22Blink%3ECSS%22> *Web Feature ID* Missing feature *Motivation* Aligning with the spec change and Firefox implementation. *Initial public proposal* *No information provided* *TAG review* *No information provided* *TAG review status* Not applicable *Risks* *Interoperability and Compatibility* The risk is that container-names set in shadow trees may now match as flat tree ancestor container for outer tree elements which are slotted into the shadow tree, or for ::part rules targeting elements inside the shadow tree which additionally rely on @container queries in outer tree rules. M142 introduced a use counter along with the implementation for detecting such cases in the wild: https://chromestatus.com/metrics/feature/timeline/popularity/5659 Three sites reported back: https://redhatofficial.github.io/: Sets padding which is overridden by another declaration not affected by container queries. No change. https://www.redhat.com/: Sets padding to 0, which is also the initial value. No change. https://www.kansascityfed.org/: Not able to trigger loading or navigating around this site. Firefox has always shipped this behavior without noticing any interop issues according to the discussion in https://github.com/w3c/csswg-drafts/issues/12090#issuecomment-3204775586 *Gecko*: Shipped/Shipping Firefox shipped this behavior in their initial release of container queries. *WebKit*: Shipped/Shipping In Safari TP *Web developers*: No signals *Other signals*: *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? *No information provided* *Debuggability* *No information provided* *Will this feature be supported on all six Blink platforms (Windows, Mac, Linux, ChromeOS, Android, and Android WebView)?* Yes *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-conditional/container-queries/container-for-shadow-dom.html https://wpt.fyi/results/css/css-conditional/container-queries/container-units-shadow.html *Flag name on about://flags* #experimental-web-platform-features *Finch feature name* CSSContainerNameNotTreeScoped *Rollout plan* Will ship enabled for all users *Requires code in //chrome?* False *Tracking bug* https://crbug.com/440049800 *Estimated milestones* Shipping on desktop 144 DevTrial on desktop 142 Shipping on Android 144 DevTrial on Android 142 Shipping on WebView 144 *Anticipated spec changes* Open questions about a feature may be a source of future web compat or interop issues. Please list open issues (e.g. links to known github issues in the project for the feature specification) whose resolution may introduce web compat/interop risk (e.g., changing to naming or structure of the API in a non-backward-compatible way). *No information provided* *Link to entry on the Chrome Platform Status* https://chromestatus.com/feature/5194034339512320?gate=4770497078362112 This intent message was generated by Chrome Platform Status <https://chromestatus.com/>. -- Rune Lillesveen -- 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 [email protected]. To view this discussion visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CACuPfeSPHANJS4nmVo_LyvoA_XYJNnHqjp9tCE3A9UjhoNhJRQ%40mail.gmail.com.
