From 1f03b20ac7ae1713b15fa3cbc1a7390220774792 Mon Sep 17 00:00:00 2001
From: Estelle Weyl <estelle@weyl.org>
Date: Sun, 3 Aug 2025 23:43:02 +0100
Subject: [PATCH 1/3] <selectedcontent>: update to description and
 specification (#40501)

* <selectedcontent>: update to description and specification

* Apply suggestions from code review

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* Apply suggestions from code review

Co-authored-by: Dipika Bhattacharya <dipika@foss-community.org>

* Update files/en-us/web/html/reference/elements/selectedcontent/index.md

Co-authored-by: Dipika Bhattacharya <dipika@foss-community.org>

* Update files/en-us/web/html/reference/elements/selectedcontent/index.md

* Apply suggestions from code review

Co-authored-by: Dipika Bhattacharya <dipika@foss-community.org>

* Update files/en-us/web/html/reference/elements/selectedcontent/index.md

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: Dipika Bhattacharya <dipika@foss-community.org>
---
 .../elements/selectedcontent/index.md         | 34 ++++++++-----------
 1 file changed, 15 insertions(+), 19 deletions(-)

diff --git a/files/en-us/web/html/reference/elements/selectedcontent/index.md b/files/en-us/web/html/reference/elements/selectedcontent/index.md
index 0034cfe1699b73c..59605ac430ed50f 100644
--- a/files/en-us/web/html/reference/elements/selectedcontent/index.md
+++ b/files/en-us/web/html/reference/elements/selectedcontent/index.md
@@ -10,47 +10,43 @@ sidebar: htmlsidebar
 
 {{SeeCompatTable}}
 
-The **`<selectedcontent>`** [HTML](/en-US/docs/Web/HTML) element can be used to display the content of the currently selected `<option>` inside a closed `<select>` element.
+The **`<selectedcontent>`** [HTML](/en-US/docs/Web/HTML) is used inside a {{htmlelement("select")}} element to display the contents of its currently selected {{htmlelement("option")}} within its first child {{htmlelement("button")}}. This enables you to style all parts of a `<select>` element, referred to as "[customizable selects](/en-US/docs/Learn_web_development/Extensions/Forms/Customizable_select)".
 
 ## Attributes
 
-The `<selectedcontent>` element includes the [global attributes](/en-US/docs/Web/HTML/Reference/Global_attributes), but they will essentially be ignored because when used correctly as a child of a select button, the element is rendered [inert](/en-US/docs/Web/HTML/Reference/Global_attributes/inert).
-
-The select button and all its content are inert by default so that if interactive children (for example, links or buttons) are included inside it, it will still be treated like a single button for interaction purposes.
-
-No other attributes are defined on `<selectedcontent>`.
+This element includes the [global attributes](/en-US/docs/Web/HTML/Reference/Global_attributes).
 
 ## Description
 
-When creating a [Customizable select element](/en-US/docs/Learn_web_development/Extensions/Forms/Customizable_select), you can include the `<selectedcontent>` element inside a {{htmlelement("button")}} element, which in turn needs to be the first child of the `<select>` element:
+You use the `<selectedcontent>` element as the only child of a {{htmlelement("button")}} element, which must be the first child of the {{htmlelement("select")}} element. Any {{htmlelement("option")}} element, the only other valid child of `<select>`, must come after the `<button>` and nested `<selectedcontent>` pair.
 
 ```html
 <select>
   <button>
     <selectedcontent></selectedcontent>
   </button>
-
+  <option></option>
   ...
 </select>
 ```
 
-`<selectedcontent>` contains a clone of a {{htmlelement("select")}} element's currently-selected {{htmlelement("option")}} element content, created using {{domxref("Node.cloneNode", "cloneNode()")}} under the hood.
+### How `<selectedcontent>` works behind the scenes
 
-Any subsequent `<select>` content will be included in the drop-down picker.
-
-Whenever the `<select>` element's selected `<option>` switches from one option to another, the `<selectedcontent>` element's content is removed and replaced by a new cloned copy of the DOM structure of the newly selected `<option>`, which is created using {{domxref("Node.cloneNode", "cloneNode()")}}.
-Dynamic modifications to the selected `<option>` element's content made after the `<select>` element has been created are not automatically cloned to the `<selectedcontent>` element, and must be manually updated by the developer.
+The `<selectedcontent>` element contains a clone of the content of the currently selected {{htmlelement("option")}}. The browser renders this clone using {{domxref("Node.cloneNode", "cloneNode()")}}. When the selected `<option>` changes, such as during a [`change`](HTMLElement/change_event) event, the contents of `<selectedcontent>` are replaced with a clone of the newly selected `<option>`. Being aware of this behavior is important, especially when working with dynamic content.
 
 > [!WARNING]
-> In particular, this may cause issues with sites that use popular front-end JavaScript frameworks where {{htmlelement("option")}} elements are dynamically updated after creation, as these updates will not be cloned to the `<selectedcontent>` element.
+> Since the browser updates `<selectedcontent>` only when the selected `<option>` changes, any dynamic modifications to the content of the selected `<option>` after the `<select>` is rendered won't be cloned to `<selectedcontent>`. You'll need to update `<selectedcontent>` manually. Watch out if you're using any of the popular front-end JavaScript frameworks where `<option>` elements are updated dynamically after the initial render–the result may not match what you expect in `<selectedcontent>`.
+
+### `<selectedcontent>` inertness
 
-## Styling with CSS
+By default, any `<button>` inside a `<select>` element is [inert](/en-US/docs/Web/HTML/Reference/Global_attributes/inert). As a result, all content inside that button—including `<selectedcontent>`—is also inert.
+This means users can't interact with or focus on content inside `<selectedcontent>`.
 
-It is useful to be able to target the currently-selected `<option>` element's content as it appears inside the select button with CSS styles, without affecting the styling of the content as it appears inside the picker.
+### Styling the selected option's content with CSS
 
-For example, your `<option>` elements may contain icons, images, or even videos. This content might look nice inside the picker, but could cause the select button to increase in size, look untidy, and affect the surrounding layout.
+You can target the content of the currently selected `<option>` element and style how it appears inside the select button. Styling the button doesn't affect the styling of the content of the `<option>` that was cloned. This lets you customize how the selected option appears in the button, separately from how it appears in the drop-down list.
 
-This could be fixed by hiding the problem content when it is contained inside `<selectedcontent>`. For example:
+For example, your `<option>` elements may contain icons, images, or even videos that render nicely inside the drop-down, but could cause the select `<button>` to increase in size, look untidy, and affect the surrounding layout. By targeting the content inside `<selectedcontent>`, you can hide elements such as images in the button, without affecting how they appear in the drop-down, as shown in the following snippet:
 
 ```css
 selectedcontent img {
@@ -59,7 +55,7 @@ selectedcontent img {
 ```
 
 > [!NOTE]
-> If the `<button>` and/or `<selectedcontent>` elements are not included inside the `<select>` markup, the browser will place the selected option content inside the select button implicitly, but this targeting will not be possible.
+> If the `<button>` and/or `<selectedcontent>` elements are not included inside `<select>`, the browser creates an implicit `<button>` to display the contents of the selected `<option>`. This fallback button cannot be targeted with CSS using the `button` or `selectedcontent` type selector.
 
 ## Examples
 

From 2c96a567388bb92a3fcbbadc2f262baa2599b5d0 Mon Sep 17 00:00:00 2001
From: wbamberg <will@bootbonnet.ca>
Date: Sun, 3 Aug 2025 17:25:56 -0700
Subject: [PATCH 2/3] PasswordCredential cannot be passed an object from
 fetch() (#40597)

* Remove incorrect statement

* layout

---------

Co-authored-by: Hamish Willee <hamishwillee@gmail.com>
---
 .../passwordcredential/index.md                | 18 ++++++------------
 1 file changed, 6 insertions(+), 12 deletions(-)

diff --git a/files/en-us/web/api/passwordcredential/passwordcredential/index.md b/files/en-us/web/api/passwordcredential/passwordcredential/index.md
index d2420f300428bca..206d1a795558cb4 100644
--- a/files/en-us/web/api/passwordcredential/passwordcredential/index.md
+++ b/files/en-us/web/api/passwordcredential/passwordcredential/index.md
@@ -10,10 +10,7 @@ browser-compat: api.PasswordCredential.PasswordCredential
 
 {{APIRef("Credential Management API")}}{{SeeCompatTable}}{{SecureContext_Header}}
 
-The **`PasswordCredential()`**
-constructor creates a new {{domxref("PasswordCredential")}} object. In
-supporting browsers, an instance of this class may be passed the `credential`
-from the `init` object for global {{domxref("Window/fetch", "fetch()")}}.
+The **`PasswordCredential()`** constructor creates a new {{domxref("PasswordCredential")}} object.
 
 ## Syntax
 
@@ -40,9 +37,9 @@ Either of the following:
       - : A string representing the credential password.
 
 - `form`
-  - : A reference to an {{domxref("HTMLFormElement")}} with appropriate input fields. The
-    form should, at the very least, contain an id and password. It could also require a
-    CSRF token.
+  - : A reference to an {{domxref("HTMLFormElement")}} with appropriate input fields.
+    The form should, at the very least, contain an id and password.
+    It could also require a CSRF token.
 
 ### Exceptions
 
@@ -51,8 +48,7 @@ Either of the following:
 
 ## Examples
 
-This example shows how to set up an {{domxref("HTMLFormElement")}} to capture data
-which we'll use to create a {{domxref("PasswordCredential")}} object.
+This example shows how to set up an {{domxref("HTMLFormElement")}} to capture data which we'll use to create a {{domxref("PasswordCredential")}} object.
 
 Starting with the form element.
 
@@ -66,9 +62,7 @@ Starting with the form element.
 </form>
 ```
 
-Then, a reference to this form element, using it to create
-a {{domxref("PasswordCredential")}} object, and storing it in the browser's password
-system.
+Then, a reference to this form element, using it to create a {{domxref("PasswordCredential")}} object, and storing it in the browser's password system.
 
 ```js
 const form = document.querySelector("#form");

From c9fed9fbb0930c3d4fa42060b0a8cd87c70c0b5b Mon Sep 17 00:00:00 2001
From: Julian Garcia-Hernandez
 <92064636+julian-garcia-hernandez@users.noreply.github.com>
Date: Sun, 3 Aug 2025 20:51:39 -0500
Subject: [PATCH 3/3] Typo fix (#40610)

Update index.md

Small typo.
---
 .../core/styling_basics/handling_conflicts/index.md             | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/en-us/learn_web_development/core/styling_basics/handling_conflicts/index.md b/files/en-us/learn_web_development/core/styling_basics/handling_conflicts/index.md
index ad6904e1bcbb631..f8e2b8826925882 100644
--- a/files/en-us/learn_web_development/core/styling_basics/handling_conflicts/index.md
+++ b/files/en-us/learn_web_development/core/styling_basics/handling_conflicts/index.md
@@ -73,7 +73,7 @@ h1 {
 
 [Specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity) is an algorithm that the browser uses to decide which property value is applied to an element. If multiple rules have different selectors that set different values for the same property and target the same element, specificity decides the property value that gets applied to the element. Specificity is basically a measure of how specific a selector's selection will be:
 
-- An type (element) selector is less specific; it will select all elements of that type that appear on a page, so it has less weight. Pseudo-element selectors have the same specificity as regular element selectors.
+- A type (element) selector is less specific; it will select all elements of that type that appear on a page, so it has less weight. Pseudo-element selectors have the same specificity as regular element selectors.
 - A class selector is more specific; it will select only the elements on a page that have a specific `class` attribute value, so it has more weight. Attribute selectors and pseudo-classes have the same weight as a class.
 - An ID selector is even more specific — it only selects a single element with a specific `id` value. It therefore has even more weight.