Re: [csswg-drafts] [css-pseudo-4] Using real DOM elements to proxy pseudo-elements (#12575)

> I'd be interested to see a sketch of how developers would use this for cases where it represents multiple pseudo-elements (e.g. which `::column::scroll-marker` was clicked) 

```html
<section id="multicol-gallery">
  <button class="col-scroll-marker">Scroll to column</button>
</section>
<style>
  #multicol-gallery {
    .col-scroll-marker { 
      display: pseudo(::column::scroll-marker); 
    } 
  }
</style>
<script>
  multicol_gallery.querySelector(".col-scroll-marker").addEventListener("click", () => {
    alert("A scroll marker was clicked");
  });
</script>
```

Note that there is no differentiation here between the different scroll markers if there are several, but that differentiation also doesn't exist with `CSSPseudoElement`. 

This proposal is very similar to the currently spec'ed `CSSPseudoElement`, except the proxy object is a DOM element instead of a JS object.

> A while ago [@kizu](https://github.com/kizu) had [a request](https://front-end.social/@kizu/111564320833361099) to be able to provide templates of content for dynamic auto-generated pseudo-elements. Would these real elements potentially provide a means of instantiating a template?

> Please also take [#12039](https://github.com/w3c/csswg-drafts/issues/12039) into account.

These are actually a similar use case, and is basically author-provided DOM instantiated according to style.
Currently there is no avenue for achieving this and I think it would need an entirely new thing like naming templates and somehow allowing syntax that injects them into the context created by style.

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


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

Received on Tuesday, 26 August 2025 14:21:20 UTC