[whatwg/dom] Selecting Events with Style (Issue #1233)

### What problem are you trying to solve?

What if DOM and HTML server-sent events could be filtered and/or selected using CSS-based selectors, e.g., for purposes of determining which to log or to otherwise process?

### What solutions exist today?

The DOM interface for events is [`Event`](https://dom.spec.whatwg.org/#interface-event) and the HTML interface for server-sent events is [`EventSource`](https://html.spec.whatwg.org/multipage/server-sent-events.html#the-eventsource-interface).

As far as I know, neither model supports filtering and/or selecting events with CSS-based selectors.

### How would you solve it?

With respect to representing events, a number of non-mutually-exclusive options can be considered:

1. Events implement [`Event`](https://dom.spec.whatwg.org/#interface-event).
2. Events implement [`DocumentFragment`](https://dom.spec.whatwg.org/#interface-documentfragment).
3. Events implement [`boolean matches(DOMString selectors)`](https://dom.spec.whatwg.org/#dom-element-matches).
4. Other

Events could each have one or more classes, resembling the [publish-subscribe pattern](https://en.wikipedia.org/wiki/Publish%E2%80%93subscribe_pattern). In markup, this might resemble:

```xml
<event class="cls1 cls2" />
```

Events could have attributes. In markup, this might resemble:

```xml
<event class="cls1 cls2" attr="value" />
```

Events could be raised or dispatched with argument objects. These argument objects could be child elements of their events. In markup, this might resemble:

```xml
<event class="cls1 cls2">
  <argument key1="value1" key2="value2" />
</event>
```

Kinds of events could be identified by URI's. In markup, this might resemble:

```xml
<html:progressevent class="cls1 cls2" xmlns:html="http://www.w3.org/1999/xhtml">
  <argument key1="value1" key2="value2" />
</html:progressevent>
```

A special-purpose CSS property, `log`, could be used to indicate whether or not to log selected events.

```css
.cls1 { log: true; }
```

```css
.cls1:has(> [key1='value1']) { log: true; }
```

A multi-valued special-purpose CSS property, `subscribe`, could, similarly, be used to indicate which logs to log selected events to.

```css
.cls1:has(> [key1='value1']) { subscribe: log1 log2; }
```

Syntax could be explored with which to enable expressiveness to select events and patterns thereof as occurring in event streams.

### Anything else?

Thank you.

-- 
Reply to this email directly or view it on GitHub:
https://github.com/whatwg/dom/issues/1233
You are receiving this because you are subscribed to this thread.

Message ID: <whatwg/dom/issues/1233@github.com>