Re: [csswg-drafts] [css-pseudo] Can we make pseudo-elements first-class citizens in the DOM? (#11559)

I don't think they can completely become first-class citizens in the DOM. Because in events, the [`target`](https://dom.spec.whatwg.org/#dom-event-target) isn't a pseudo-element, and allowing it to be a `CSSPseudoElement` seems most likely not web compatible.

> Get info about their position+size

In some cases you can use `getComputedStyle` to get the height and width.

I don't think `getBoundingClientRect()` makes much sense for non-tree-abiding pseudo-elements like `::selection`.

> Animate them: Only if they already have animation attached to them that you can hijack

You don't need to hijack, you can animate directly, this works on browsers:

```html
<!DOCTYPE html>
<style>div::before { content: "<::before>" }</style>
<div>text</div>
<script>
new Animation(new KeyframeEffect(
  document.querySelector("div"),
  [{ color: "blue" }, { color: "red" }],
  {
    duration: 2000,
    direction: "alternate",
    iterations: "Infinity",
    pseudoElement: "::before",
  },
), document.timeline).play();
</script>
```

> Theoretically using Element.getAnimations() but that is not specced yet

It's specced (but seems unimplemented): https://drafts.csswg.org/web-animations-1/#dictdef-getanimationsoptions

```js
element.getAnimations({pseudoElement: "::before"})
```

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


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

Received on Thursday, 23 January 2025 00:09:43 UTC