Bug report
Current Behavior
When rendering the Dialog inside a Shadow-DOM the accessibility validations for the Dialog-Title always fail as document.getElementById cannot find elements in the Shadow-DOM.
Expected behavior
The error logs in the console are not printed.
Reproducible example
can be provided if required
Suggested solution
As you can only render the Dialog in a Shadow-DOM by using the DialogPortal, it would make sense, to use the provided container element to find the root element in such cases by using getRootNode.
Additional context
I need to use a Shadow-DOM to not be effected by the styles of the Host-Application.
Your environment
| Software |
Name(s) |
Version |
| Radix Package(s) |
@radix-ui/react-dialog |
1.1.15 |
| React |
n/a |
19.2.3 |
| Browser |
Chrome |
144.0.7559.133 |
| Assistive tech |
x |
x |
| Node |
n/a |
v24.13.1 |
| npm/yarn/pnpm |
npm |
11.8.0 |
| Operating System |
macos |
26.3 |
Bug report
Current Behavior
When rendering the Dialog inside a Shadow-DOM the accessibility validations for the Dialog-Title always fail as document.getElementById cannot find elements in the Shadow-DOM.
Expected behavior
The error logs in the console are not printed.
Reproducible example
can be provided if required
Suggested solution
As you can only render the Dialog in a Shadow-DOM by using the DialogPortal, it would make sense, to use the provided container element to find the root element in such cases by using getRootNode.
Additional context
I need to use a Shadow-DOM to not be effected by the styles of the Host-Application.
Your environment