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:

<main>
  <div id=source></div>
  <div id=target></div>
</main>

And styles:

/* 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:

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.