Re: [csswg-drafts] Add a property to the `CSSPseudoElement` IDL interface to determine if a pseudo element "exists" (#12158)

A way to approach this that might also address some of the other use cases like #12575, is to have an explicit observer for (tree-abiding) pseudo-element creation/removal, that is triggered during the style/layout loop (at the same time as `ResizeObserver`).

It would only work for tree-abiding and view-transition pseudo elements, but will give the developer an actual handle to that object, on which they can run all the different commands (`addEventListener`, `getBoundingClientRect`, `animate`, `ResizeObserver`, `IntersectionObserver`...).

This observer would be similar to the `slotchange` event or `MutationObserver` callback in the sense that the author would receive handles to nodes that are "from a different tree", however that "pseudo-tree" would be read-only, and any attempt to modify it (e.g. add/remove/set attribute) would result in a `HierarchyError` or some such (some details of this can be further fleshed out).

Note that these pseudo-elements might be removed by the next animation frame if the style changes... but in a way that's not different from slotting or from having elements from different sources that query each other using `MutationObserver`.

Some code samples:
```js
// with view transiitons
new PseudoElementObserver(({addedPseudoElements, removedPseudoElements}) => {
 for (const vt_group of addedPseudoElements.filter(e => e.name === "view-transition-group")) {
    console.log(vt_group.getBoundingClientRect();
   new IntersectionObserver(() => { console.log("The group has entered the viewport"); }).observe(vt_group);    
}
  
}).observe(document.documentElement);

new PseudoElementObserver(({addedPseudoElements, removedPseudoElements}) => {
 for (const vt_group of addedPseudoElements.filter(e => e.name === "marker")) {
    marker.addEventListener("click", () => console.log("This marker was clicked");
 }
  
}).observe(my_gallery);
```






-- 
GitHub Notification of comment by noamr
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/12158#issuecomment-3241722567 using your GitHub account


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

Received on Monday, 1 September 2025 10:04:34 UTC