Skip to content

Add section on CSS selector side effects when using Activity mode #8377

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
PriyaV2307 wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Add section on CSS selector side effects when using Activity mode #8377

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0e3029c
Document CSS selector behavior with hidden Activity
PriyaV2307 Mar 25, 2026
d031a76
Add ID to CSS selector side effects section
PriyaV2307 Mar 25, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 13 additions & 0 deletions src/content/reference/react/Activity.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1235,6 +1235,19 @@ The most common cases of this will be from the following tags:
- `<video>`
- `<audio>`
- `<iframe>`
### CSS selector side effects {/*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.

Expand Down
Loading