[csswg-drafts] [css-shadow-parts] Pseudo-classes to the right of the part pseudo and :focus. (#4555)

emilio has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-shadow-parts] Pseudo-classes to the right of the part pseudo and :focus. ==
It seems like we agreed on allowing `::part(foo):focus` and co. That's alright.

But this gets interesting when combined with the new rules for matching `:focus` (where `:focus` from a scope matches the outermost shadow root containing the focused element).

TLDR, I think this test (which I wrote as part of fixing a Firefox bug) should pass, but it doesn't in Blink and I think it doesn't per spec:

```html
<!doctype html>
<title>Shadow parts are invalidated correctly when only a pseudo-class state to the right of the part matches</title>
<link rel="help" href="https://drafts.csswg.org/css-shadow-parts/#part">
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
<link rel="author" title="Mozilla" href="https://mozilla.org">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
  #host::part(p) {
    background-color: red;
  }
  #host::part(p):focus {
    background-color: lime;
  }
</style>
<div id="host"></div>
<script>
test(function() {
  let host = document.getElementById("host");
  host.attachShadow({ mode: "open" }).innerHTML = `
    <style>
      div {
        width: 100px;
        height: 100px;
      }
    </style>
    <div part=p tabindex=0></div>
  `;
  let part = host.shadowRoot.querySelector("div");
  assert_equals(getComputedStyle(part).backgroundColor, "rgb(255, 0, 0)");
  part.focus();
  assert_equals(
    getComputedStyle(part).backgroundColor,
    "rgb(0, 255, 0)",
    "Style should've been properly invalidated"
  );
}, "Shadow parts are invalidated correctly when only a pseudo-class state to the right of the part matches");
</script>
```

Do people agree it should generally pass? If so, how do we define this?

cc @fergald @rakina @rniwa @tabatkins 

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/4555 using your GitHub account

Received on Tuesday, 3 December 2019 01:22:12 UTC