267793 2024-01-19 15:34:26 -0800 CSS container queries don't work with Shadow DOM :host selector 2024-01-29 23:52:43 -0800 1 1 1 Unclassified WebKit CSS Safari 17 Unspecified Unspecified NEW https://bugs.webkit.org/show_bug.cgi?id=267046 InRadar P2 Normal --- 148695 1 mail webkit-unassigned annevk eoconnor karlcow koivisto rniwa studio webkit-bug-importer oldest_to_newest 2006271 0 469473 mail 2024-01-19 15:34:26 -0800 Created attachment 469473 standalone HTML file used to reproduce the behavior Safari's behavior around CSS container queries mixed with shadow DOM is different than both Chrome and Firefox. The short version of what I want to do is to use shadow DOM and put `:host { container: my-container-name; }` inside a style tag in shadow DOM, then use a `@container` query to respond to the size of the host element changing. I made a CodePen to reproduce the issue. You can load it in Safari 17 or Safari Technology Preview and reproduce the issue by resizing the browser horizontally. In Safari it seems that you need to put the `container` property on a different element besides `:host` for it to work. Admittedly, I'm not sure if Safari is following the spec correctly or not here. I mean, I can see how it seems a bit ambiguous whether that container name should actually be visible inside the shadow DOM since it's defined on an element that's technically outside of it. If this is actually spec compliant, I'm happy to close this issue and open issues with Chrome and Firefox instead. https://codepen.io/wavebeem/pen/RwdVvJO I've also included the full reproduction as a standalone HTML file in the attachments. 2006281 1 webkit-bug-importer 2024-01-19 16:20:50 -0800 <rdar://problem/121289354> 2006949 2 studio 2024-01-23 12:15:40 -0800 Looks like the same bug. Adding it here as a reference. https://bugs.webkit.org/show_bug.cgi?id=267046 469473 2024-01-19 15:34:26 -0800 2024-01-19 15:34:26 -0800 standalone HTML file used to reproduce the behavior file_267793.txt text/plain 2481 mail PCFET0NUWVBFIGh0bWw+DQo8aHRtbCBsYW5nPSJlbiI+DQogIDxoZWFkPg0KICAgIDxtZXRhIGNo YXJzZXQ9IlVURi04IiAvPg0KICAgIDxtZXRhIG5hbWU9InZpZXdwb3J0IiBjb250ZW50PSJ3aWR0 aD1kZXZpY2Utd2lkdGgsIGluaXRpYWwtc2NhbGU9MS4wIiAvPg0KICAgIDx0aXRsZT5Eb2N1bWVu dDwvdGl0bGU+DQogICAgPHNjcmlwdCB0eXBlPSJtb2R1bGUiPg0KICAgICAgY29uc3QgaHRtbCA9 IFN0cmluZy5yYXc7DQoNCiAgICAgIGNsYXNzIEJhc2UgZXh0ZW5kcyBIVE1MRWxlbWVudCB7DQog ICAgICAgIGNvbnN0cnVjdG9yKCkgew0KICAgICAgICAgIHN1cGVyKCk7DQogICAgICAgICAgdGhp cy5hdHRhY2hTaGFkb3coeyBtb2RlOiAib3BlbiIgfSk7DQogICAgICAgIH0NCiAgICAgIH0NCg0K ICAgICAgY2xhc3MgWENvbnRhaW5lcjEgZXh0ZW5kcyBCYXNlIHsNCiAgICAgICAgY29ubmVjdGVk Q2FsbGJhY2soKSB7DQogICAgICAgICAgdGhpcy5zaGFkb3dSb290LmlubmVySFRNTCA9IGh0bWxg DQogICAgICAgICAgICA8c3R5bGU+DQogICAgICAgICAgICAgIDpob3N0IHsNCiAgICAgICAgICAg ICAgICBkaXNwbGF5OiBibG9jazsNCiAgICAgICAgICAgICAgICBjb250YWluZXI6IG15LWNvbnRh aW5lcjsNCiAgICAgICAgICAgICAgICBjb250YWluZXItdHlwZTogaW5saW5lLXNpemU7DQogICAg ICAgICAgICAgIH0NCg0KICAgICAgICAgICAgICAuYm94IHsNCiAgICAgICAgICAgICAgICBiYWNr Z3JvdW5kOiBibHVlOw0KICAgICAgICAgICAgICAgIG1heC13aWR0aDogbWF4LWNvbnRlbnQ7DQog ICAgICAgICAgICAgICAgYXNwZWN0LXJhdGlvOiAxIC8gMTsNCiAgICAgICAgICAgICAgICBwYWRk aW5nOiAxcmVtOw0KICAgICAgICAgICAgICAgIGNvbG9yOiB3aGl0ZTsNCiAgICAgICAgICAgICAg fQ0KDQogICAgICAgICAgICAgIEBjb250YWluZXIgbXktY29udGFpbmVyIChtaW4td2lkdGg6IDQw MHB4KSB7DQogICAgICAgICAgICAgICAgLmJveCB7DQogICAgICAgICAgICAgICAgICBiYWNrZ3Jv dW5kOiByZWQ7DQogICAgICAgICAgICAgICAgICBvdXRsaW5lOiAycHggc29saWQ7DQogICAgICAg ICAgICAgICAgICBvdXRsaW5lLW9mZnNldDogLTRweDsNCiAgICAgICAgICAgICAgICB9DQogICAg ICAgICAgICAgIH0NCiAgICAgICAgICAgIDwvc3R5bGU+DQogICAgICAgICAgICA8ZGl2IGNsYXNz PSJib3giPiR7dGhpcy5sb2NhbE5hbWV9PC9kaXY+DQogICAgICAgICAgYDsNCiAgICAgICAgfQ0K ICAgICAgfQ0KDQogICAgICBjbGFzcyBYQ29udGFpbmVyMiBleHRlbmRzIEJhc2Ugew0KICAgICAg ICBjb25uZWN0ZWRDYWxsYmFjaygpIHsNCiAgICAgICAgICB0aGlzLnNoYWRvd1Jvb3QuaW5uZXJI VE1MID0gaHRtbGANCiAgICAgICAgICAgIDxzdHlsZT4NCiAgICAgICAgICAgICAgOmhvc3Qgew0K ICAgICAgICAgICAgICAgIGRpc3BsYXk6IGJsb2NrOw0KICAgICAgICAgICAgICB9DQoNCiAgICAg ICAgICAgICAgLndyYXBwZXIgew0KICAgICAgICAgICAgICAgIGNvbnRhaW5lcjogbXktY29udGFp bmVyOw0KICAgICAgICAgICAgICAgIGNvbnRhaW5lci10eXBlOiBpbmxpbmUtc2l6ZTsNCiAgICAg ICAgICAgICAgfQ0KDQogICAgICAgICAgICAgIC5ib3ggew0KICAgICAgICAgICAgICAgIGJhY2tn cm91bmQ6IGdyZWVuOw0KICAgICAgICAgICAgICAgIG1heC13aWR0aDogbWF4LWNvbnRlbnQ7DQog ICAgICAgICAgICAgICAgYXNwZWN0LXJhdGlvOiAxIC8gMTsNCiAgICAgICAgICAgICAgICBwYWRk aW5nOiAxcmVtOw0KICAgICAgICAgICAgICAgIGNvbG9yOiB3aGl0ZTsNCiAgICAgICAgICAgICAg fQ0KDQogICAgICAgICAgICAgIEBjb250YWluZXIgbXktY29udGFpbmVyIChtaW4td2lkdGg6IDQw MHB4KSB7DQogICAgICAgICAgICAgICAgLmJveCB7DQogICAgICAgICAgICAgICAgICBiYWNrZ3Jv dW5kOiBwdXJwbGU7DQogICAgICAgICAgICAgICAgICBvdXRsaW5lOiAycHggc29saWQ7DQogICAg ICAgICAgICAgICAgICBvdXRsaW5lLW9mZnNldDogLTRweDsNCiAgICAgICAgICAgICAgICB9DQog ICAgICAgICAgICAgIH0NCiAgICAgICAgICAgIDwvc3R5bGU+DQogICAgICAgICAgICA8ZGl2IGNs YXNzPSJ3cmFwcGVyIj4NCiAgICAgICAgICAgICAgPGRpdiBjbGFzcz0iYm94Ij4ke3RoaXMubG9j YWxOYW1lfTwvZGl2Pg0KICAgICAgICAgICAgPC9kaXY+DQogICAgICAgICAgYDsNCiAgICAgICAg fQ0KICAgICAgfQ0KDQogICAgICBjdXN0b21FbGVtZW50cy5kZWZpbmUoIngtY29udGFpbmVyMSIs IFhDb250YWluZXIxKTsNCiAgICAgIGN1c3RvbUVsZW1lbnRzLmRlZmluZSgieC1jb250YWluZXIy IiwgWENvbnRhaW5lcjIpOw0KICAgIDwvc2NyaXB0Pg0KICA8L2hlYWQ+DQogIDxib2R5Pg0KICAg IDx4LWNvbnRhaW5lcjE+PC94LWNvbnRhaW5lcjE+DQogICAgPHgtY29udGFpbmVyMj48L3gtY29u dGFpbmVyMj4NCiAgPC9ib2R5Pg0KPC9odG1sPg0K