Proposal: Allow Custom Event Names in pointer-events for CSS Pseudo-elements

[paulcodeman]

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:

.box::after {
    pointer-events: "my_event";
}

In JavaScript, this could be handled as:

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.

[bramus]

This is solved by .pseudo(), allowing you to attach event listeners directly onto the pseudo.

document.querySelector('#box').pseudo('after').addEventListener('click', cb);

(But no browser has this implemented, unfortunately)

[paulcodeman]

Why not document.querySelector('#box::after')?

[bramus]

Because querySelector is (currently) specced to return an Element, not a CSSPseudoElement.