[css-nesting] Interaction with :host is unfortunate. #9509

emilio · 2023-10-21T13:15:01Z

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.

This is similar to #9153 / #9492 (cc: #8738).

cc: @tabatkins @andruud @mdubet @LeaVerou @fantasai

The text was updated successfully, but these errors were encountered:

tabatkins · 2023-10-21T15:44:29Z

That's an impl bug. The spec supports this case.

For &:

The nesting selector is capable of matching featureless elements, if they were matched by the parent rule.

For :is(:host):

A featureless element does not match any selector at all, except those it is explicitly defined to match (and logical combination pseudo-classes representing those selectors).

emilio · 2023-10-21T17:27:32Z

We should add tests, though that's a bit complicated impl wise (at least in Firefox), because you need not to match all other selectors inside :is().

emilio · 2023-10-21T19:44:26Z

@tabatkins my read about your second quote is that :is(:host) should match but :is(#foo, :host) shouldn't, is that right? If so that simplifies the implementation significantly.

emilio · 2023-10-21T19:45:26Z

(That means that nesting inside foo, :host would not work as expected perhaps, but that seems more edge-casey than just nesting inside :host)

tabatkins · 2023-10-22T19:11:27Z

No, I'd expect :is(#foo, :host) to match, just like #foo, :host would. That's the point of that line.

andruud · 2023-10-23T06:46:57Z

Yes, I've been wanting to fix this for a while in Blink. In our (implementations') defense, :is() not matching the host was the correct behavior at the time. The spec was changed later. :-)

This should work per spec, see w3c/csswg-drafts#9509. Tweak a bit the selector flags set up so that checking for :host selectors during CascadeData rebuilds is cheap. Differential Revision: https://phabricator.services.mozilla.com/D191570

This should work per spec, see w3c/csswg-drafts#9509. Tweak a bit the selector flags set up so that checking for :host selectors during CascadeData rebuilds is cheap. Differential Revision: https://phabricator.services.mozilla.com/D191570 bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1850974 gecko-commit: 3b13b5585380e95b76444f10d65a42d3543bbd1a gecko-reviewers: zrhoffman

This should work per spec, see w3c/csswg-drafts#9509. Tweak a bit the selector flags set up so that checking for :host selectors during CascadeData rebuilds is cheap. Differential Revision: https://phabricator.services.mozilla.com/D191570 UltraBlame original commit: 3b13b5585380e95b76444f10d65a42d3543bbd1a

This should work per spec, see w3c/csswg-drafts#9509. Tweak a bit the selector flags set up so that checking for :host selectors during CascadeData rebuilds is cheap. Differential Revision: https://phabricator.services.mozilla.com/D191570 bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1850974 gecko-commit: 8b16994e8df5ba96e720e00a4f0289fdb3a83708 gecko-reviewers: zrhoffman

This should work per spec, see w3c/csswg-drafts#9509. Tweak a bit the selector flags set up so that checking for :host selectors during CascadeData rebuilds is cheap. Differential Revision: https://phabricator.services.mozilla.com/D191570

This should work per spec, see w3c/csswg-drafts#9509. Tweak a bit the selector flags set up so that checking for :host selectors during CascadeData rebuilds is cheap. Differential Revision: https://phabricator.services.mozilla.com/D191570 bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1850974 gecko-commit: 8b16994e8df5ba96e720e00a4f0289fdb3a83708 gecko-reviewers: zrhoffman

This should work per spec, see w3c/csswg-drafts#9509. Tweak a bit the selector flags set up so that checking for :host selectors during CascadeData rebuilds is cheap. Differential Revision: https://phabricator.services.mozilla.com/D191570 UltraBlame original commit: 8b16994e8df5ba96e720e00a4f0289fdb3a83708

This should work per spec, see w3c/csswg-drafts#9509. Tweak a bit the selector flags set up so that checking for :host selectors during CascadeData rebuilds is cheap. Differential Revision: https://phabricator.services.mozilla.com/D191570

tabatkins closed this as completed Oct 21, 2023

tabatkins added css-nesting-1 Current Work Closed as Question Answered Used when the issue is more of a question than a problem, and it's been answered. labels Oct 21, 2023

andruud mentioned this issue Oct 23, 2023

CSS Nesting web-platform-tests/interop#420

Closed

3 tasks

moz-wptsync-bot mentioned this issue Oct 28, 2023

[Gecko Bug 1850974] Make :is(:host) work. web-platform-tests/wpt#42822

Merged

emilio mentioned this issue Apr 5, 2024

[selectors] Should :not(foo) match the host of the shadow tree? #10179

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[css-nesting] Interaction with :host is unfortunate. #9509

[css-nesting] Interaction with :host is unfortunate. #9509

emilio commented Oct 21, 2023

tabatkins commented Oct 21, 2023

emilio commented Oct 21, 2023

emilio commented Oct 21, 2023

emilio commented Oct 21, 2023

tabatkins commented Oct 22, 2023

andruud commented Oct 23, 2023

[css-nesting] Interaction with :host is unfortunate. #9509

[css-nesting] Interaction with :host is unfortunate. #9509

Comments

emilio commented Oct 21, 2023

tabatkins commented Oct 21, 2023

emilio commented Oct 21, 2023

emilio commented Oct 21, 2023

emilio commented Oct 21, 2023

tabatkins commented Oct 22, 2023

andruud commented Oct 23, 2023