:has() selector polyfill?

[kerryj89]

Since the styles are applied through JS, I wonder if you can write logic to polyfill :has()? That is the golden css selector that everyone has needed at one point or another. With that, you won't even need the better supported :focus-within, just do :has(:focus) and I have needed a similar :checked-within which does not exist, but with :has(:checked) that would be easy.

[1aron]

@kerryj89 It's going to be a bit difficult because different CSS features have complex and unique behaviors.
This would have to add extra behavior and logic to each selector, :has currently seems to be very poorly supported.

Let me guess you should want:

<!-- 🥲 Browser does not support -->
<label class="font:blue:has(:checked)">
    <input checked>
</label>

But if so:

<div class="display:flex flex:col">
    <!-- 🤩 WoW -->
    <input checked class="font:blue:checked+label order:1" type="checkbox">
    <label class="order:0">title</label>
</div>