From 59981b3af165e475960defd0d52300249889e80c Mon Sep 17 00:00:00 2001 From: "Queen Vinyl Da.i'gyu-Kazotetsu" Date: Mon, 11 Jul 2022 06:24:52 -0700 Subject: [PATCH] Demix slotchange from GlobalEventHandlers --- files/en-us/_redirects.txt | 1 + .../mozilla/firefox/releases/93/index.md | 2 +- .../web/api/globaleventhandlers/index.md | 2 - .../globaleventhandlers/onslotchange/index.md | 62 ------------------- .../web/api/shadowroot/onslotchange/index.md | 2 +- 5 files changed, 3 insertions(+), 66 deletions(-) delete mode 100644 files/en-us/web/api/globaleventhandlers/onslotchange/index.md diff --git a/files/en-us/_redirects.txt b/files/en-us/_redirects.txt index f2be6cbc068bf07..e7a048670dbb349 100644 --- a/files/en-us/_redirects.txt +++ b/files/en-us/_redirects.txt @@ -8169,6 +8169,7 @@ /en-US/docs/Web/API/GlobalEventHandlers/onreset /en-US/docs/Web/API/HTMLFormElement/reset_event /en-US/docs/Web/API/GlobalEventHandlers/onresize /en-US/docs/Web/API/Window/resize_event /en-US/docs/Web/API/GlobalEventHandlers/onselect /en-US/docs/Web/API/HTMLInputElement/select_event +/en-US/docs/Web/API/GlobalEventHandlers/onslotchange /en-US/docs/Web/API/HTMLSlotElement/slotchange_event /en-US/docs/Web/API/GlobalEventHandlers/onsubmit /en-US/docs/Web/API/HTMLFormElement/submit_event /en-US/docs/Web/API/GlobalEventHandlers/ontouchcancel /en-US/docs/Web/API/Element/touchcancel_event /en-US/docs/Web/API/GlobalEventHandlers/ontouchend /en-US/docs/Web/API/Element/touchend_event diff --git a/files/en-us/mozilla/firefox/releases/93/index.md b/files/en-us/mozilla/firefox/releases/93/index.md index 7b3220636ae3f4b..0c672463c5f0577 100644 --- a/files/en-us/mozilla/firefox/releases/93/index.md +++ b/files/en-us/mozilla/firefox/releases/93/index.md @@ -45,7 +45,7 @@ This article provides information about the changes in Firefox 93 that will affe - The {{domxref("GlobalEventHandlers.onsecuritypolicyviolation","onsecuritypolicyviolation")}} global event handler property is now supported. This can be used to assign a handler for processing [`securitypolicyviolation`](/en-US/docs/Web/API/Element/securitypolicyviolation_event) events fired when there is a [Content Security Policy](/en-US/docs/Web/HTTP/CSP) violation ({{bug(1727302)}}). -- The `onslotchange` event handler property is now supported on {{domxref("GlobalEventHandlers.onslotchange","GlobalEventHandlers")}} and {{domxref("ShadowRoot.onslotchange","ShadowRoot")}}. +- The `onslotchange` event handler property is now supported on {{domxref("HTMLSlotElement.onslotchange","HTMLSlotElement")}} and {{domxref("ShadowRoot.onslotchange","ShadowRoot")}}. This can be used to assign a handler for processing [`slotchange`](/en-US/docs/Web/API/HTMLSlotElement/slotchange_event) events, which are fired on {{HTMLElement("slot")}} elements when the node(s) contained in the slot change ({{bug(1501983)}}). #### Removals diff --git a/files/en-us/web/api/globaleventhandlers/index.md b/files/en-us/web/api/globaleventhandlers/index.md index 9431da9bb28b9d7..1446f13c99d0c54 100644 --- a/files/en-us/web/api/globaleventhandlers/index.md +++ b/files/en-us/web/api/globaleventhandlers/index.md @@ -123,8 +123,6 @@ These event handlers are defined on the {{domxref("GlobalEventHandlers")}} mixin - : An [event handler](/en-US/docs/Web/Events/Event_handlers) representing the code to be called when the `selectionchange` event is raised, i.e. when the text selected on a web page changes. - {{domxref("GlobalEventHandlers.onshow")}} {{Deprecated_Inline}} - : An [event handler](/en-US/docs/Web/Events/Event_handlers) representing the code to be called when the {{event("show")}} event is raised. -- {{domxref("GlobalEventHandlers.onslotchange")}} - - : An [event handler](/en-US/docs/Web/Events/Event_handlers) representing the code to be called when the {{event("slotchange")}} event is raised. - {{domxref("GlobalEventHandlers.onstalled")}} - : An [event handler](/en-US/docs/Web/Events/Event_handlers) representing the code to be called when the {{event("stalled")}} event is raised. - {{domxref("GlobalEventHandlers.onsuspend")}} diff --git a/files/en-us/web/api/globaleventhandlers/onslotchange/index.md b/files/en-us/web/api/globaleventhandlers/onslotchange/index.md deleted file mode 100644 index 10308fdd2bfcadc..000000000000000 --- a/files/en-us/web/api/globaleventhandlers/onslotchange/index.md +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: GlobalEventHandlers.onslotchange -slug: Web/API/GlobalEventHandlers/onslotchange -page-type: web-api-instance-property -tags: - - API - - Event Handler - - Experimental - - GlobalEventHandlers - - Property - - Reference - - Shadow DOM API - - slot - - slotchange - - onslotchange -browser-compat: api.GlobalEventHandlers.onslotchange ---- -{{ApiRef('DOM')}}{{SeeCompatTable}} - -The **`onslotchange`** property of the {{domxref("GlobalEventHandlers")}} mixin is an [event handler](/en-US/docs/Web/Events/Event_handlers) that processes {{event("slotchange")}} events. - -The `slotchange` event is fired on {{DOMxRef("HTMLSlotElement")}} instances ({{HTMLElement("slot")}} elements) when the node(s) contained in the slot change. - -## Examples - -The following snippet is a slightly modified version of our [slotchange example](https://github.com/mdn/web-components-examples/tree/main/slotchange) which uses `onslotchange` rather than adding a listener for the `slotchange` event. - -First the code gets an array of all the ``s and then assigns a handler function to the `onslotchange` property on the template's second slot — this second slot is the one that has its contents changed in the example. -Every time the element in the slot changes, we log a report to the console saying which slot has changed, and what the new node inside the slot is. - -```js -let slots = this.shadowRoot.querySelectorAll('slot'); -slots[1].onslotchange = function(e) { - let nodes = slots[1].assignedNodes(); - console.log('Element in Slot "' + slots[1].name + '" changed to "' + nodes[0].outerHTML + '".'); -}; -``` - -We might alternatively handle the event at a higher level. -The snippet below shows the equivalent code if the handler is assigned to `onslotchange` on the `shadowRoot`. -Every time the element in any slot changes, we log a report to the console saying which slot has changed, and what the new node inside the slot is. - -```js -this.shadowRoot.onslotchange = function(e) { - const nodes = e.originalTarget.assignedNodes(); - console.log(`Element in Slot "${e.originalTarget.name}" changed to "${nodes[0].outerHTML}".`); -}; -``` - -## Specifications - -{{Specifications}} - -## Browser compatibility - -{{Compat}} - -## See also - -- [Using templates and slots](/en-US/docs/Web/Web_Components/Using_templates_and_slots) -- {{event("slotchange")}} event -- {{domxref("HTMLSlotElement")}} diff --git a/files/en-us/web/api/shadowroot/onslotchange/index.md b/files/en-us/web/api/shadowroot/onslotchange/index.md index 041e635d21e1cfb..b02a9fe7c9fad9d 100644 --- a/files/en-us/web/api/shadowroot/onslotchange/index.md +++ b/files/en-us/web/api/shadowroot/onslotchange/index.md @@ -47,4 +47,4 @@ this.shadowRoot.onslotchange = function(e) { - [Using templates and slots](/en-US/docs/Web/Web_Components/Using_templates_and_slots) - {{event("slotchange")}} event - {{domxref("HTMLSlotElement")}} -- {{domxref("GlobalEventHandlers.onslotchange")}} +- {{domxref("HTMLSlotElement.onslotchange")}}