From b5a7c2098c667c24c5434e5036524034269f9e9c Mon Sep 17 00:00:00 2001 From: Chris Mills Date: Mon, 1 Dec 2025 16:19:48 +0000 Subject: [PATCH 1/6] Update exception information for Navigation.navigate() (#41915) * Update exception information for Navigation.navigate() * Add Fx144 rel note * Update files/en-us/web/api/navigation/navigate/index.md Co-authored-by: Dipika Bhattacharya * Fixes for dipika review comments --------- Co-authored-by: Dipika Bhattacharya --- files/en-us/mozilla/firefox/releases/144/index.md | 1 + files/en-us/web/api/navigation/navigate/index.md | 10 ++++++---- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/files/en-us/mozilla/firefox/releases/144/index.md b/files/en-us/mozilla/firefox/releases/144/index.md index c1f4cff6f57c132..d439daf0e0c203a 100644 --- a/files/en-us/mozilla/firefox/releases/144/index.md +++ b/files/en-us/mozilla/firefox/releases/144/index.md @@ -45,6 +45,7 @@ Firefox 144 was released on [October 14, 2025](https://whattrainisitnow.com/rele - The [View Transition API](/en-US/docs/Web/API/View_Transition_API) is now supported for [SPAs (single-page applications)](/en-US/docs/Glossary/SPA). This provides a mechanism for easily creating animated transitions between different website views. ([Firefox bug 1985809](https://bugzil.la/1985809)). - The {{domxref("CSSStyleProperties")}} interface of the [CSS Object Model (CSSOM)](/en-US/docs/Web/API/CSS_Object_Model) is now implemented (this was renamed from a non-standard interface `CSS2Properties`). The new interface is present but not yet used. ([Firefox bug 1919582](https://bugzil.la/1919582)). - The {{domxref("PerformanceEventTiming.interactionId", "interactionId")}} property of the {{domxref("PerformanceEventTiming")}} interface is a unique identifier that associates related events belonging to a single user interaction. This can be used to calculate the {{glossary("Interaction to next paint")}} metric, which helps analyze responsiveness to user interaction over the lifetime of a page. ([Firefox bug 1956809](https://bugzil.la/1956809)). +- The {{domxref("Navigation.navigate()")}} method of the {{domxref("Navigation API", "Navigation API", "", "nocode")}} no longer accepts URLs with a scheme of `javascript`. Calling `navigate()` with a `javascript:` URL now throws a `NotSupportedError` exception. ([Firefox bug 1981104](https://bugzil.la/1981104)). #### DOM diff --git a/files/en-us/web/api/navigation/navigate/index.md b/files/en-us/web/api/navigation/navigate/index.md index aa619567780da9a..7c775048ba4a19c 100644 --- a/files/en-us/web/api/navigation/navigate/index.md +++ b/files/en-us/web/api/navigation/navigate/index.md @@ -23,7 +23,7 @@ navigate(url, options) ### Parameters - `url` - - : The destination URL to navigate to. Note that when calling `navigate()` on another window's `navigation` object, the URL will be resolved relative to the target window's URL, not the calling window's URL. This matches the behavior of the [History API](/en-US/docs/Web/API/History_API), but not the behavior of the [Location API](/en-US/docs/Web/API/Location). + - : The destination URL to navigate to. Note that when calling `navigate()` on another window's `navigation` object, the URL will be resolved relative to the target window's URL, not the calling window's URL. This matches the behavior of the [History API](/en-US/docs/Web/API/History_API), but not the behavior of the [Location API](/en-US/docs/Web/API/Location). Note also that `javascript:` URLs are not allowed for security reasons. - `options` {{optional_inline}} - : An options object containing the following properties: - `state` {{optional_inline}} @@ -50,12 +50,14 @@ Either one of these promises rejects if the navigation has failed for some reaso ### Exceptions - `DataCloneError` {{domxref("DOMException")}} - - : Thrown if the `state` parameter had values included in it that are not structured-cloneable. + - : Thrown if the `state` parameter contains values that are not structured-cloneable. +- `InvalidStateError` {{domxref("DOMException")}} + - : Thrown if the document is not currently active. - `SyntaxError` {{domxref("DOMException")}} - : Thrown if the `url` parameter is not a valid URL. - `NotSupportedError` {{domxref("DOMException")}} - - : Thrown if the `history` option is set to `push`, and any of the following special circumstances are true: - - The browser is currently showing the initial `about:blank` document. + - : Thrown if: + - The `history` option is set to `push`, and the browser is currently showing the initial `about:blank` document. - The `url`'s scheme is `javascript`. ## Examples From 8d244a3942f5546a10537885da013017f38a609d Mon Sep 17 00:00:00 2001 From: Youssef Date: Mon, 1 Dec 2025 16:40:18 +0000 Subject: [PATCH 2/6] Make a single line of code-example easier to read and understand (#42185) * Make a single line of code-example easier to read and understand For learners that never learned DOM, I guess `body.removeChild(panel)` is clearer than `panel.parentNode.removeChild(panel)`. And I guess it fits better with the previous line of code: `body.appendChild(panel)`. * Fix a linting issue * Removing an ending coma to fix lintin issue Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Improve the clarity of a section about addEventListener() Co-authored-by: Chris Mills --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Claas Augner <495429+caugner@users.noreply.github.com> Co-authored-by: Chris Mills --- .../core/scripting/build_your_own_function/index.md | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/files/en-us/learn_web_development/core/scripting/build_your_own_function/index.md b/files/en-us/learn_web_development/core/scripting/build_your_own_function/index.md index 2039ecffc20a61c..540c6a5fa02f02d 100644 --- a/files/en-us/learn_web_development/core/scripting/build_your_own_function/index.md +++ b/files/en-us/learn_web_development/core/scripting/build_your_own_function/index.md @@ -78,9 +78,7 @@ To begin with, let's put together a basic function. closeBtn.textContent = "x"; panel.appendChild(closeBtn); - closeBtn.addEventListener("click", () => - panel.parentNode.removeChild(panel), - ); + closeBtn.addEventListener("click", () => body.removeChild(panel)); ``` This is quite a lot of code to go through, so we'll walk you through it bit by bit. @@ -117,10 +115,10 @@ panel.appendChild(closeBtn); Finally, we call {{domxref("EventTarget/addEventListener", "addEventListener()")}} to add a function that will be called when the user clicks the "close" button. The code will delete the whole panel from the page — to close the message box. -Briefly, the `addEventListener()` method is provided by the button (or in fact, any element on the page) that can be passed a function and the name of an event. In this case, the name of the event is 'click', meaning that when the user clicks the button, the function will run. You'll learn a lot more about events in our [events article](/en-US/docs/Learn_web_development/Core/Scripting/Events). The line inside the function uses the {{domxref("Node.removeChild()")}} DOM API function to specify that we want to remove a specific child element of the HTML element — in this case, the panel `
`. +Briefly, the `addEventListener()` method can be called on any element on the page, and is usually passed two arguments: the name of an event and a function to run when the event occurs. In this case, the event name is `click`, meaning that when the user clicks the button, the function will run. You'll learn a lot more about events in our [events article](/en-US/docs/Learn_web_development/Core/Scripting/Events). The line inside the function uses the {{domxref("Node.removeChild()", "removeChild()")}} method to specify that we want to remove a specific child element of the `` element: in this case, the panel `
`. ```js -closeBtn.addEventListener("click", () => panel.parentNode.removeChild(panel)); +closeBtn.addEventListener("click", () => body.removeChild(panel)); ``` Basically, this whole block of code is generating a block of HTML that looks like so, and inserting it into the page: From 40b5a742e7f916fb2f5937cbf7d58849f226945e Mon Sep 17 00:00:00 2001 From: Claas Augner <495429+caugner@users.noreply.github.com> Date: Mon, 1 Dec 2025 18:26:18 +0100 Subject: [PATCH 3/6] chore(deps): bump node from v22 to v24 (#42188) * chore(deps): bump node from v22 to v24 * chore(deps): run `npm audit fix` --- .nvmrc | 2 +- package-lock.json | 8 ++++---- package.json | 2 +- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/.nvmrc b/.nvmrc index 53d1c14db376ead..54c65116f15a683 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1 +1 @@ -v22 +v24 diff --git a/package-lock.json b/package-lock.json index a520b0f1cedb28e..fbef1a9ff193598 100644 --- a/package-lock.json +++ b/package-lock.json @@ -47,7 +47,7 @@ "yargs": "^18.0.0" }, "engines": { - "node": ">=22" + "node": ">=24" } }, "node_modules/@apideck/better-ajv-errors": { @@ -9765,9 +9765,9 @@ } }, "node_modules/rimraf/node_modules/glob": { - "version": "10.4.5", - "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz", - "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==", + "version": "10.5.0", + "resolved": "https://registry.npmjs.org/glob/-/glob-10.5.0.tgz", + "integrity": "sha512-DfXN8DfhJ7NH3Oe7cFmu3NCu1wKbkReJ8TorzSAFbSKrlNaQSKfIzqYqVY8zlbs2NLBbWpRiU52GX2PbaBVNkg==", "license": "ISC", "dependencies": { "foreground-child": "^3.1.0", diff --git a/package.json b/package.json index c410476f0a3044a..7e85fb7dd2b4c70 100644 --- a/package.json +++ b/package.json @@ -14,7 +14,7 @@ "url": "git+https://github.com/mdn/content.git" }, "engines": { - "node": ">=22" + "node": ">=24" }, "type": "module", "scripts": { From be462ccb608b9c2d9ef69b143961da8da77aa60d Mon Sep 17 00:00:00 2001 From: vasilich-tregub Date: Tue, 2 Dec 2025 02:16:27 +0700 Subject: [PATCH 4/6] Update index.md of using textures in webgl (#42165) * Update index.md of using textures in webgl A misleading phrase "Because WebGL now requires textures to be loaded from secure contexts" is removed from the document in this PR. It is true that "Loading of WebGL textures is subject to cross-domain access controls", but to make the context secure the data shall be delivered over an authenticated and encrypted channel, i.e,, requires the use of an HTTPS protocol schema. However, there is no mandatory requirement for webgl applications to load textures from secure context. Cross origin requests are also supported for an HTTP protocol. The documentation should be free from misleading claims. Besides, it is easier to set up a local http server for webgl-example tutorial experiments. I examined the use of an unencrypted http server (Python http.server) with samples of the webgl-examples tutorial and confirm that the samples1-8 work as expected. * Update index.md if -> when * Update files/en-us/web/api/webgl_api/tutorial/using_textures_in_webgl/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Update files/en-us/web/api/webgl_api/tutorial/using_textures_in_webgl/index.md --------- Co-authored-by: wbamberg Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- .../web/api/webgl_api/tutorial/using_textures_in_webgl/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/api/webgl_api/tutorial/using_textures_in_webgl/index.md b/files/en-us/web/api/webgl_api/tutorial/using_textures_in_webgl/index.md index 03fb9147be56b8a..4497e8b412db306 100644 --- a/files/en-us/web/api/webgl_api/tutorial/using_textures_in_webgl/index.md +++ b/files/en-us/web/api/webgl_api/tutorial/using_textures_in_webgl/index.md @@ -345,7 +345,7 @@ At this point, the rotating cube should be good to go. Loading of WebGL textures is subject to cross-domain access controls. In order for your content to load a texture from another domain, CORS approval needs to be obtained. See [HTTP access control](/en-US/docs/Web/HTTP/Guides/CORS) for details on CORS. -Because WebGL now requires textures to be loaded from secure contexts, you can't use textures loaded from `file:///` URLs in WebGL. That means that you'll need a secure web server to test and deploy your code. For local testing, see our guide [How do you set up a local testing server?](/en-US/docs/Learn_web_development/Howto/Tools_and_setup/set_up_a_local_testing_server) for help. +Modern browsers usually treat the origin of files loaded using the file:/// scheme as _opaque origins_. Even when a file includes other files from the same folder, they are not assumed to come from the same origin, and may trigger CORS errors (see [Same-origin policy#File origins](/en-US/docs/Web/Security/Defenses/Same-origin_policy#file_origins)). That means that you can't use textures loaded from `file:///` URLs in WebGL and need a web server to test and deploy your code. For local testing, see our guide [How do you set up a local testing server?](/en-US/docs/Learn_web_development/Howto/Tools_and_setup/set_up_a_local_testing_server) for help. See this [hacks.mozilla.org article](https://hacks.mozilla.org/2011/11/using-cors-to-load-webgl-textures-from-cross-domain-images/) for an explanation of how to use CORS-approved images as WebGL textures. From 6012fe912a34bb129d5f9848a2b01b63468950f8 Mon Sep 17 00:00:00 2001 From: Blue Falcon <130698314+anonhostpi@users.noreply.github.com> Date: Mon, 1 Dec 2025 12:41:44 -0700 Subject: [PATCH 5/6] Fix Return Value for Writable Stream (#42174) * Fix Return Value for Writable Stream Update return value description to specify 'undefined' per #42173 * Update files/en-us/web/api/writablestream/abort/index.md --------- Co-authored-by: wbamberg --- files/en-us/web/api/writablestream/abort/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/api/writablestream/abort/index.md b/files/en-us/web/api/writablestream/abort/index.md index 18eba18903eff4c..056d4b0db3cb7dd 100644 --- a/files/en-us/web/api/writablestream/abort/index.md +++ b/files/en-us/web/api/writablestream/abort/index.md @@ -23,7 +23,7 @@ abort(reason) ### Return value -A {{jsxref("Promise")}}, which fulfills with the value given in the `reason` parameter. +A {{jsxref("Promise")}}, which fulfills with `undefined`. ### Exceptions From 730741c750cc299b85798f1adbaf7adbd6e2016d Mon Sep 17 00:00:00 2001 From: Anthony Frehner Date: Mon, 1 Dec 2025 12:49:25 -0700 Subject: [PATCH 6/6] Change cloneNode references to importNode (#41441) * Change cloneNode references to importNode * add notes to cloneNode and importNode pages * Rephrase note * Fix others * Add ownerDocument example --------- Co-authored-by: Joshua Chen --- .../api/customelementregistry/get/index.md | 6 +- .../customelementregistry/getname/index.md | 4 +- .../web/api/document/importnode/index.md | 16 +++-- .../documentfragment/getelementbyid/index.md | 2 +- .../api/htmltemplateelement/content/index.md | 30 ++++++++-- .../api/intersection_observer_api/index.md | 17 +++--- files/en-us/web/api/node/clonenode/index.md | 58 +++++++++++++------ .../api/shadowroot/elementfrompoint/index.md | 7 +-- .../using_templates_and_slots/index.md | 6 +- .../web/api/window/customelements/index.md | 6 +- .../selectors/_doublecolon_slotted/index.md | 9 ++- .../html/reference/elements/template/index.md | 18 +++--- .../global_attributes/exportparts/index.md | 26 ++++----- 13 files changed, 117 insertions(+), 88 deletions(-) diff --git a/files/en-us/web/api/customelementregistry/get/index.md b/files/en-us/web/api/customelementregistry/get/index.md index 78f0ae9b89a1f04..cadd9bb0f04c8a7 100644 --- a/files/en-us/web/api/customelementregistry/get/index.md +++ b/files/en-us/web/api/customelementregistry/get/index.md @@ -34,16 +34,16 @@ customElements.define( "my-paragraph", class extends HTMLElement { constructor() { - let templateContent = document.getElementById("custom-paragraph").content; + const template = document.getElementById("custom-paragraph"); super() // returns element this scope .attachShadow({ mode: "open" }) // sets AND returns this.shadowRoot - .append(templateContent.cloneNode(true)); + .append(document.importNode(template.content, true)); } }, ); // Return a reference to the my-paragraph constructor -let ctor = customElements.get("my-paragraph"); +const ctor = customElements.get("my-paragraph"); ``` ## Specifications diff --git a/files/en-us/web/api/customelementregistry/getname/index.md b/files/en-us/web/api/customelementregistry/getname/index.md index 723608cb9856103..95406aade6a9839 100644 --- a/files/en-us/web/api/customelementregistry/getname/index.md +++ b/files/en-us/web/api/customelementregistry/getname/index.md @@ -32,10 +32,10 @@ The name for the previously defined custom element, or `null` if there is no cus ```js class MyParagraph extends HTMLElement { constructor() { - let templateContent = document.getElementById("custom-paragraph").content; + const template = document.getElementById("custom-paragraph"); super() // returns element this scope .attachShadow({ mode: "open" }) // sets AND returns this.shadowRoot - .append(templateContent.cloneNode(true)); + .append(document.importNode(template.content, true)); } } diff --git a/files/en-us/web/api/document/importnode/index.md b/files/en-us/web/api/document/importnode/index.md index c7c9cca89378a97..d3126bc8ea05384 100644 --- a/files/en-us/web/api/document/importnode/index.md +++ b/files/en-us/web/api/document/importnode/index.md @@ -8,17 +8,13 @@ browser-compat: api.Document.importNode {{APIRef("DOM")}} -The {{domxref("Document")}} object's **`importNode()`** method creates a copy of a -{{domxref("Node")}} or {{domxref("DocumentFragment")}} from another document, to be -inserted into the current document later. +The **`importNode()`** method of the {{domxref("Document")}} interface creates a copy of a {{domxref("Node")}} or {{domxref("DocumentFragment")}} from another document, to be inserted into the current document later. -The imported node is not yet included in the document tree. To include it, you need to -call an insertion method such as {{domxref("Node.appendChild", "appendChild()")}} or -{{domxref("Node.insertBefore", "insertBefore()")}} with a node that _is_ -currently in the document tree. +The imported node is not yet included in the document tree. To include it, you need to call an insertion method such as {{domxref("Node.appendChild", "appendChild()")}} or {{domxref("Node.insertBefore", "insertBefore()")}} with a node that _is_ currently in the document tree. -Unlike {{domxref("document.adoptNode()")}}, the original node is not removed from its -original document. The imported node is a clone of the original. +Unlike {{domxref("document.adoptNode()")}}, the original node is not removed from its original document. The imported node is a clone of the original. + +The {{domxref("Node.cloneNode()")}} method also creates a copy of a node. The difference is that `importNode()` clones the node in the context of the calling document, whereas `cloneNode()` uses the document of the node being cloned. The document context determines the {{domxref("CustomElementRegistry")}} for constructing any custom elements. For this reason, to clone nodes to be used in another document, use `importNode()` on the target document. The {{domxref("HTMLTemplateElement.content")}} is owned by a separate document, so it should also be cloned using `document.importNode()` so that custom element descendants are constructed using the definitions in the current document. See the {{domxref("Node.cloneNode()")}} page's examples for more details. ## Syntax @@ -50,6 +46,8 @@ The copied `importedNode` in the scope of the importing document. ## Examples +### Using importNode() + ```js const iframe = document.querySelector("iframe"); const oldNode = iframe.contentWindow.document.getElementById("myNode"); diff --git a/files/en-us/web/api/documentfragment/getelementbyid/index.md b/files/en-us/web/api/documentfragment/getelementbyid/index.md index 56155f048ac231f..52aff4b716116f8 100644 --- a/files/en-us/web/api/documentfragment/getelementbyid/index.md +++ b/files/en-us/web/api/documentfragment/getelementbyid/index.md @@ -102,7 +102,7 @@ function displayStatus() { while (fragmentViewer.hasChildNodes()) { fragmentViewer.removeChild(fragmentViewer.lastChild); } - for (entry of fragment.children) { + for (const entry of fragment.children) { fragmentViewer.appendChild(entry.cloneNode(true)); } } diff --git a/files/en-us/web/api/htmltemplateelement/content/index.md b/files/en-us/web/api/htmltemplateelement/content/index.md index 0ad4c38a622126c..bf376c92eb8f23e 100644 --- a/files/en-us/web/api/htmltemplateelement/content/index.md +++ b/files/en-us/web/api/htmltemplateelement/content/index.md @@ -8,9 +8,9 @@ browser-compat: api.HTMLTemplateElement.content {{APIRef("Web Components")}} -The **`HTMLTemplateElement.content`** property returns a -`