[csswg-drafts] [css-view-transitions-1] Possible perf footgun when styling pseudo-tree based on state (#8960)

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

== [css-view-transitions-1] Possible perf footgun when styling pseudo-tree based on state ==
Currently in order to change the style of the generated pseudo-tree based on state of the DOM one has to use a `:has()` selector on the `html` element to capture that state and then chain the pseudo-elements from there to style them.
I have discussed this with @una, @lilles, and @andruud at CSS Day and they said that using a `:has()` on an element so high up the DOM tree may be a big perf issue with rendering possibly taking a few seconds in some cases.

Here is a codepen with a simple example: https://codepen.io/ydaniv/pen/QWJjgQp

Basically it has this:
```html
<main>
  <div id=source></div>
  <div id=target></div>
</main>
```

And styles:
```css
/* This is our source of trouble */
html:has(.switch)::view-transition-group(circle) {
  animation-duration: 1.2s;
}

#source {
  view-transition-name: circle;
 
 .switch & {
    display: none;
  }
}

#target {
  display: none;

  .switch & {
    display: block;
  }
}
```

And the JS for triggering VT is:

```javascript
document.startViewTransition(() => {
    main.classList.toggle('switch');
});
```

My concern is that this may become a common pattern and cause big frustration, probably even more so users than to authors.

It's possible to work around this by lifting all such state up to the `html` element and try to mitigate this with communicating this to authors.
However, I think it's worth trying to find another solution for avoiding it altogetehr.

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


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Tuesday, 13 June 2023 11:53:04 UTC