[css-nesting] Interaction with :host is unfortunate. #9509
Description
This test-case (live) doesn't produce the expected behavior (purple) in any browser:
<!doctype html>
<div id="host">Something</div>
<script>
host.attachShadow({ mode: "open" }).innerHTML = `
<style>
:host {
background-color: green;
}
div {
background-color: red;
display: inline-block;
width: 12px;
height: 12px;
}
:host(#host) div {
background-color: blue;
}
:host(#host) {
div {
background-color: purple;
}
}
</style>
<slot></slot>
<div></div>
`;
</script>This is because per spec, the host only matches featureless :host selectors, and the & (or :is(:host(..)) for that matter) isn't that.