[csswg-drafts] Proposal: Allow Custom Event Names in `pointer-events` for CSS Pseudo-elements (#11527)

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

== Proposal: Allow Custom Event Names in `pointer-events` for CSS Pseudo-elements ==
#### Introduction
Currently, CSS pseudo-elements (`:before`, `:after`) do not support direct interaction with JavaScript events, limiting their utility in interactive designs. Developers often rely on workarounds, such as attaching events to parent elements and calculating click positions to infer interactions with pseudo-elements.

#### Proposal
I propose extending the `pointer-events` property to support custom event names. For example:
```css
.box::after {
    pointer-events: "my_event";
}
```
In JavaScript, this could be handled as:
```javascript
document.getElementById('box').addEventListener('click', function(event) {
    if (event.name === "my_event") {
        // Handle the custom event
    }
});
```

#### Benefits
- **Improved Developer Experience**: Simplifies the process of handling events on pseudo-elements, reducing the need for complex workarounds.
- **Enhanced Interactivity**: Allows for more interactive and dynamic designs directly within CSS, streamlining the development process.
- **Consistency**: Provides a more intuitive way to work with pseudo-elements, aligning their capabilities with regular DOM elements.

#### Considerations
- **Backward Compatibility**: The implementation should ensure that existing usages of `pointer-events` are not affected.
- **Performance**: Careful consideration should be given to how browsers handle custom events in terms of performance to avoid potential slowdowns.
- **Specification and Implementation**: This proposal would require updates to both the CSS specification and browser implementations, which might involve significant effort.

I believe this feature would greatly benefit the web development community and am open to feedback and discussion on how best to refine this proposal.

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


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

Received on Saturday, 18 January 2025 08:00:48 UTC