Why aren't checkbox input change events composed?

user_3874771 0
Viewed 390

I'm finding that change events generated by an <input type="checkbox"> have composed set to false (at least on Chrome 80).

The Event.composed flag determines if events propagate across shadow DOM boundaries. The documentation for Event.composed on Mozilla (https://developer.mozilla.org/en-US/docs/Web/API/Event/composed) states:

All UA-dispatched UI events are composed (click/touch/mouseover/copy/paste, etc.).

So, is composed = false the expected behavior for input change events?

Is this documented in a spec (I've tried unsuccessfully to find it)?

If this is the expected behavior, what is the rationale for composed = false for change, but composed = true for, say click?

Thanks, Adam

web-component javascript
1 Answers

The following has been taken verbatim from this article: Shadow DOM v1: Self-Contained Web Components  |  Web Fundamentals

The Shadow DOM event model --- When an event bubbles up from shadow DOM it's target is adjusted to maintain the encapsulation that shadow DOM provides. That is, events are re-targeted to look like they've come from the component rather than internal elements within your shadow DOM. Some events do not even propagate out of shadow DOM.

The events that do cross the shadow boundary are:

  • Focus Events: blur, focus, focusin, focusout
  • Mouse Events: click, dblclick, mousedown, mouseenter, mousemove, etc.
  • Wheel Events: wheel
  • Input Events: beforeinput, input
  • Keyboard Events: keydown, keyup
  • Composition Events: compositionstart, compositionupdate, compositionend
  • DragEvent: dragstart, drag, dragend, drop, etc.

As for specs, the change event is not an instance of InputEvent or UIEvent: https://www.w3.org/TR/uievents/#events-inputevents. It is an instance of Event.

As for rationale as to why it doesn't bubble out of a Shadow DOM, I'm afraid I can't offer much for certain. All I can say is that the change event does not refer directly to the user action, like the event 'input' does, but rather refers to the changing of the value of the HTMLElement. I imagine only events considered user actions should bubble out.

Edit to include further references:

Here is the discussion surrounding the rationale for the change to the spec: https://github.com/w3c/webcomponents/issues/513

user_35011040
Related