From 0e3029c78b8cda8aa72ec769c2179f7a5703d196 Mon Sep 17 00:00:00 2001
From: Lakshmipriya <vpriyalak@gmail.com>
Date: Wed, 25 Mar 2026 12:28:52 +0100
Subject: [PATCH 1/2] Document CSS selector behavior with hidden Activity

Add section on CSS selector side effects when using Activity mode.
---
 src/content/reference/react/Activity.md | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/src/content/reference/react/Activity.md b/src/content/reference/react/Activity.md
index b79bed9e2a7..8f36d90eb01 100644
--- a/src/content/reference/react/Activity.md
+++ b/src/content/reference/react/Activity.md
@@ -1235,6 +1235,19 @@ The most common cases of this will be from the following tags:
   - `<video>`
   - `<audio>`
   - `<iframe>`
+### CSS selector side effects
+
+When using `<Activity mode="hidden">`, elements remain in the DOM but are hidden using `display: none`.
+
+Because of this, some CSS selectors such as `:has()`, `:is()`, and `:where()` may still match these hidden elements. This can lead to unexpected styling behavior even after components are visually hidden.
+
+For example, selectors that depend on the presence of elements in the DOM may continue to apply styles even if those elements are no longer visible.
+
+This is expected behavior, since CSS selectors operate on DOM structure rather than element visibility.
+
+To avoid this, you can:
+- Remove elements from the DOM when necessary
+- Avoid selectors that depend on hidden elements
 
 Typically, though, most of your React components should already be robust to being hidden by an Activity boundary. And conceptually, you should think of "hidden" Activities as being unmounted.
 

From d031a7676ff4ac13617e29b2bc1440eaceaf031a Mon Sep 17 00:00:00 2001
From: Lakshmipriya <vpriyalak@gmail.com>
Date: Wed, 25 Mar 2026 12:45:09 +0100
Subject: [PATCH 2/2] Add ID to CSS selector side effects section

Added an ID to the CSS selector side effects section for easier navigation.
---
 src/content/reference/react/Activity.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/reference/react/Activity.md b/src/content/reference/react/Activity.md
index 8f36d90eb01..d7fac422b9f 100644
--- a/src/content/reference/react/Activity.md
+++ b/src/content/reference/react/Activity.md
@@ -1235,7 +1235,7 @@ The most common cases of this will be from the following tags:
   - `<video>`
   - `<audio>`
   - `<iframe>`
-### CSS selector side effects
+### CSS selector side effects {/*css-selector-side-effects*/}
 
 When using `<Activity mode="hidden">`, elements remain in the DOM but are hidden using `display: none`.