From fa84883f4298bbbd4c1c4e6e3b83e6db0dea42c4 Mon Sep 17 00:00:00 2001
From: Chris Mills <chrisdavidmills@gmail.com>
Date: Wed, 1 Jul 2026 15:47:28 +0100
Subject: [PATCH 1/2] Chrome 149 User action pseudo-class top-layer boundary

---
 files/en-us/glossary/top_layer/index.md       |  2 +
 .../forms/customizable_select/index.md        |  9 +++-
 .../selectors/pseudo-classes/index.md         | 47 +++++++++++++++++++
 3 files changed, 56 insertions(+), 2 deletions(-)

diff --git a/files/en-us/glossary/top_layer/index.md b/files/en-us/glossary/top_layer/index.md
index bd95c7a0e50d9e3..8b7f1db0590795b 100644
--- a/files/en-us/glossary/top_layer/index.md
+++ b/files/en-us/glossary/top_layer/index.md
@@ -14,6 +14,7 @@ Elements that will appear in the top layer include:
 - Fullscreen elements, i.e., elements that have been caused to display in fullscreen mode by a successful {{domxref("Element.requestFullscreen()")}} call.
 - {{htmlelement("dialog")}} elements displayed as a modal via a successful {{domxref("HTMLDialogElement.showModal()")}} call.
 - Popover elements shown via a successful {{domxref("HTMLElement.showPopover()")}} call.
+- The picker of a drop-down [customizable `<select>` element](/en-US/docs/Learn_web_development/Extensions/Forms/Customizable_select).
 
 Some browsers, such as Chrome, show elements placed in the top layer inside a special DOM tree entry. For example:
 
@@ -28,3 +29,4 @@ Note that the top layer is an internal browser concept and cannot be directly ma
 - {{htmlelement("dialog")}} element, {{domxref("HTMLDialogElement")}} interface
 - [Popover API](/en-US/docs/Web/API/Popover_API)
 - {{CSSXref(":fullscreen")}} pseudo-class
+- [Customizable select elements](/en-US/docs/Learn_web_development/Extensions/Forms/Customizable_select)
diff --git a/files/en-us/learn_web_development/extensions/forms/customizable_select/index.md b/files/en-us/learn_web_development/extensions/forms/customizable_select/index.md
index e7ae96f36a31599..23b56a4ba9fed1a 100644
--- a/files/en-us/learn_web_development/extensions/forms/customizable_select/index.md
+++ b/files/en-us/learn_web_development/extensions/forms/customizable_select/index.md
@@ -212,7 +212,12 @@ Let's have a look at the work so far — note how the picker arrow rotates smoot
 
 The drop-down picker can be targeted using the {{cssxref("::picker()", "::picker(select)")}} pseudo-element. As mentioned earlier, the picker contains everything inside the `<select>` element that isn't the button and the `<selectedcontent>`. In our example, this means all the `<option>` elements and their contents.
 
-First of all, the picker's default black {{cssxref("border")}} is removed:
+When the picker is opened, its contents (contained within the `::picker(select)` pseudo-element) are promoted to the {{glossary("top layer")}}, as if they were contained inside a [popover](/en-US/docs/Web/API/Popover_API). This ensures that the picker is displayed on top of elements surrounding the `<select>` element.
+
+> [!NOTE]
+> The select picker is also subject to [top-layer ancestor matching boundary](/en-US/docs/Web/CSS/Reference/Selectors/Pseudo-classes#top-layer_ancestor_matching_boundary) behavior, which ensures that {{cssxref(":hover")}}, {{cssxref(":active")}}, or {{cssxref(":focus-within")}} styles applied to the picker's descendants won't spill out of the picker.
+
+In our example, we start by removing the picker's default black {{cssxref("border")}}:
 
 ```css live-sample___third-render live-sample___fourth-render live-sample___full-render
 ::picker(select) {
@@ -354,7 +359,7 @@ The list of transitioned properties features `opacity`, however it also includes
 - {{cssxref("display")}}
   - : The `display` values changes from `none` to `block` when the popover changes state from hidden to shown. This needs to be animated to ensure that other transitions are visible.
 - {{cssxref("overlay")}}
-  - : The `overlay` value changes from `none` to `auto` when the popover changes state from hidden to shown, to promote it to the {{glossary("top layer")}}, then back again when it is hidden to remove it. This needs to be animated to ensure the removal of the popover from the top layer is deferred until the transition completes, ensuring the transition is visible.
+  - : The `overlay` value changes from `none` to `auto` when the popover changes state from hidden to shown, to promote it to the top layer, then back again when it is hidden to remove it. This needs to be animated to ensure the removal of the popover from the top layer is deferred until the transition completes, ensuring the transition is visible.
 
 > [!NOTE]
 > The [`allow-discrete`](/en-US/docs/Web/CSS/Reference/Properties/transition-behavior#allow-discrete) value is needed to enable discrete property animations.
diff --git a/files/en-us/web/css/reference/selectors/pseudo-classes/index.md b/files/en-us/web/css/reference/selectors/pseudo-classes/index.md
index 96b9c251dbd8f98..6e8fc3e014aae4e 100644
--- a/files/en-us/web/css/reference/selectors/pseudo-classes/index.md
+++ b/files/en-us/web/css/reference/selectors/pseudo-classes/index.md
@@ -213,6 +213,53 @@ These pseudo-classes require some interaction by the user in order for them to a
 - {{CSSxRef(":target-current")}}
   - : Matches the {{cssxref("::scroll-marker")}} pseudo-element of a {{cssxref("scroll-marker-group")}} that is currently scrolled to, in other words, the **active** scroll marker.
 
+### Top-layer ancestor matching boundary
+
+When setting styles using a `:hover`, `:active`, or `:focus-within` pseudo-class selector, a nested set of elements will match the selector up the DOM tree. If the hierarchy includes an element in the {{glossary("top layer")}} (for example, a [popover](/en-US/docs/Web/API/Popover_API) or [customizable `<select>`](/en-US/docs/Learn_web_development/Extensions/Forms/Customizable_select) picker), the matching will stop at that element.
+
+For example, the following code features a customizable `<select>` element and a popover. We've set every element in the page to have a thick blue dashed {{cssxref("border")}} on hover.
+
+```html live-sample___matching-boundary
+<main>
+  <select>
+    <option>One</option>
+    <option>Two</option>
+    <option>Three</option>
+  </select>
+
+  <div>
+    <button popovertarget="mypopover">Toggle popover</button>
+    <section id="mypopover" popover>
+      <p>I am a popover</p>
+      <button>I am a popover button</button>
+    </section>
+  </div>
+</main>
+```
+
+```css hidden live-sample___matching-boundary
+* {
+  padding: 5px;
+}
+```
+
+```css live-sample___matching-boundary
+select,
+::picker(select) {
+  appearance: base-select;
+}
+
+:hover {
+  border: 5px dashed blue;
+}
+```
+
+{{embedlivesample("matching-boundary", "100%", 200)}}
+
+Note how when you hover the `<select>` or the popover toggle button, all ancestors of those elements will get the border. However, when you open the select picker or the popover and hover one of their descendants, the matching stops at the top-layer ancestor (the select picker or popover themselves).
+
+This behavior stops component styles set on those pseudo-classes from spilling out of a top layer component into the surrounding page, which can cause a user interface to look broken.
+
 ## Functional pseudo-classes
 
 These pseudo-classes accept a [selector list](/en-US/docs/Web/CSS/Reference/Selectors/Selector_list) or [forgiving selector list](/en-US/docs/Web/CSS/Reference/Selectors/Selector_list#forgiving_selector_list) as a parameter.

From 5140b69478ed81917c04bda9e4de1eb92cbd9cac Mon Sep 17 00:00:00 2001
From: Chris Mills <chrisdavidmills@gmail.com>
Date: Thu, 2 Jul 2026 08:32:12 +0100
Subject: [PATCH 2/2] fixes for mfreed review comments

---
 .../extensions/forms/customizable_select/index.md             | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/files/en-us/learn_web_development/extensions/forms/customizable_select/index.md b/files/en-us/learn_web_development/extensions/forms/customizable_select/index.md
index 23b56a4ba9fed1a..8848d43ab01d3ff 100644
--- a/files/en-us/learn_web_development/extensions/forms/customizable_select/index.md
+++ b/files/en-us/learn_web_development/extensions/forms/customizable_select/index.md
@@ -212,10 +212,10 @@ Let's have a look at the work so far — note how the picker arrow rotates smoot
 
 The drop-down picker can be targeted using the {{cssxref("::picker()", "::picker(select)")}} pseudo-element. As mentioned earlier, the picker contains everything inside the `<select>` element that isn't the button and the `<selectedcontent>`. In our example, this means all the `<option>` elements and their contents.
 
-When the picker is opened, its contents (contained within the `::picker(select)` pseudo-element) are promoted to the {{glossary("top layer")}}, as if they were contained inside a [popover](/en-US/docs/Web/API/Popover_API). This ensures that the picker is displayed on top of elements surrounding the `<select>` element.
+When the picker is opened, its contents (contained within the `::picker(select)` pseudo-element) are promoted to the {{glossary("top layer")}}, because the picker is a [popover](/en-US/docs/Web/API/Popover_API). This ensures that the picker displays on top of other elements, and interacts gracefully with other popovers on the page (for example, closing unrelated ones that are already open).
 
 > [!NOTE]
-> The select picker is also subject to [top-layer ancestor matching boundary](/en-US/docs/Web/CSS/Reference/Selectors/Pseudo-classes#top-layer_ancestor_matching_boundary) behavior, which ensures that {{cssxref(":hover")}}, {{cssxref(":active")}}, or {{cssxref(":focus-within")}} styles applied to the picker's descendants won't spill out of the picker.
+> The select picker is also subject to [top-layer ancestor matching boundary](/en-US/docs/Web/CSS/Reference/Selectors/Pseudo-classes#top-layer_ancestor_matching_boundary) behavior, which ensures that {{cssxref(":hover")}}, {{cssxref(":active")}}, or {{cssxref(":focus-within")}} styles applied to the `<select>` will only match the picker's descendants while the picker is interacted with, not the `<select>` itself.
 
 In our example, we start by removing the picker's default black {{cssxref("border")}}: