- From: Westbrook Johnson via GitHub <noreply@w3.org>
- Date: Sat, 28 Mar 2026 15:44:01 +0000
- To: public-css-archive@w3.org
Was recently made aware of a negative test in WebKit that I hadn't reviewed. Currently, while WebKit has great coverage for `:host(:has(...)` as seen in examples above. It accidentally delivers that same functionality to `:host:has(...)`, which I believe should be concidered incorrect.
See: https://codepen.io/Westbrook/pen/WbGMZvw?editors=1010
Therein, I would expect the following HTML to display a `<div>` with a green background AND a green dashed border where the various `:host:has(...)` and `:host(:has(...))` selectors implemented as desired by the Web Components Community Group.
```html
<div>
<template shadowrootmode="open">
<style>
:host {
width: 100px;
height: 100px;
background-clip: content-box !important;
border: 10px dashed red;
}
:host(:has(div)) {
border: 10px dashed green;
}
:host:has(div) {
background: red;
}
:host:has(span) {
background: green;
}
</style>
<span></span>
<slot></slot>
</template>
<div></div>
</div>
```
Displays the following:
**Chrome (MacOS 15.7.4, 147.0.7727.3)**
<img width="139" height="142" alt="Image" src="https://github.com/user-attachments/assets/80f161f2-bc24-4a61-a20c-9f83c46c528a" />
**FireFox (MacOS 15.7.4, 148.0.2)**
<img width="142" height="145" alt="Image" src="https://github.com/user-attachments/assets/970486d2-c4fc-42c4-845a-e1d544353950" />
**WebKit (MacOS 15.7.4, 26.3 (20623.2.7.18.1))**
<img width="140" height="140" alt="Image" src="https://github.com/user-attachments/assets/f7615204-88dd-4782-b12e-675648bbfe5d" />
--
GitHub Notification of comment by Westbrook
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/11859#issuecomment-4148296514 using your GitHub account
--
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Saturday, 28 March 2026 15:44:02 UTC