Summary
The slotchange event is fired on a <slot> element when the node(s) it
contained change. One can listen to that event via the
EventTarget.addEventListener() API. The goal is now to expose the
onslotchange IDL attribute from the GlobalEventHandlers and ShadowRoot
interfaces, so that one can register a listener by attaching this
attribute to target elements.
Motivation
The slotchange event is fired on a <slot> element when the node(s) it
contained change. One can naturally listen to that event via the
EventTarget.addEventListener() API. However, web developers are also
familiar with the alternative attribute-based form (e.g.
element.addEventListener("load", ...) Vs on <element onload="...">)
which is sometimes convenient for quick testing. For consistency with
other events, an attribute onslotchange is thus added.
Its important to have it on ShadowRoot too as <slot> is normally used
for web components, and there is a common use case to add a listener on
this ShadowRoot.
Explainer:
Currently, the way to listen an event is:
target.addEventListener("slotchange", listener);
After this addition an alternative attribute-based form will be
availlable for the developers
element
<target onslotchange="myListener()">
Doc Link(s):
-
https://html.spec.whatwg.org/#handler-onslotchange
-
https://dom.spec.whatwg.org/#dom-shadowroot-onslotchange
-
https://github.com/whatwg/dom/pull/785
-
https://github.com/whatwg/html/pull/4129
Specification
https://html.spec.whatwg.org
Interoperability and Compatibility
Chromium:
- Positive
(
https://bugs.chromium.org/p/chromium/issues/detail?id=1006096)
WebKit:
- Shipped/Shipping (
https://bugs.webkit.org/show_bug.cgi?id=191310)
Contact emails
ssi...@igalia.com,
fw...@chromium.org
Devtools bug: N/A
Is this feature fully tested by web-platform-tests?
Yes
Web Platform Tests:
dom/idlharness.window_exclude=Node
html/dom/idlharness.https_exclude=(Document_Window_HTML._)
html/dom/idlharness.https_include=(Document_Window)
html/dom/idlharness.https_include=HTML._
html/webappapis/scripting/events/event-handler-all-global-events
html/webappapis/scripting/events/event-handler-attributes-body-window
html/webappapis/scripting/events/event-handler-attributes-frameset-window
html/webappapis/scripting/events/event-handler-attributes-windowless-body
mathml/relations/html5-tree/math-global-event-handlers.tentative