[Dialog & AlertDialog] fix: can't get id correctly in shadow dom
Description
Using document.getElementById in Shadow DOM contexts will fail to access encapsulated elements. The correct approach is to query the element by ID from the parent DialogContent container instead.
fixed https://github.com/radix-ui/primitives/issues/3484 https://github.com/radix-ui/primitives/issues/2986#issuecomment-2609260795
Getting this merged in would be amazing.
This PR would be extremely helpful! I'm rendering my dialogs in a Shadow DOM for style isolation and getting these exact console errors since the components can't find elements across Shadow DOM boundaries.
Hi! 👋
Thank you so much for working on this PR!
I encountered this exact issue while developing a browser extension where rendering AlertDialogContent inside a Shadow DOM (using Portal container={shadowRoot}) is necessary for style isolation. This setup causes the TitleWarning check (document.getElementById) to fail, resulting in a false positive console.error because the check doesn't search within the specified container.
This PR seems to address the problem perfectly by making the accessibility check container-aware.
I've tested the changes locally by applying this PR's code using pnpm patch, and I can confirm that it successfully resolves the console error in my Shadow DOM scenario without any apparent side effects. The dialog remains accessible and functional.
This fix is a great improvement for developers working with Radix primitives in environments like browser extensions or micro-frontends that rely on Shadow DOM.
Looking forward to seeing this merged! Thanks again!
Nice work on the MR, would love to see this merge in so we can upgrade and no longer see these console.errors 🙏
Also having the issue when integrating the Dialog in Shadow Dom, can't wait for this fix to be merged !
Cheers !
Also have the same implementation using Shadow DOM, and seeing the same errors.
Would love to see this merged so our logs aren't polluted! @chaance
We're running into exactly the same error in our app when rendering dialogs in shadow roots. Really hoping this can land. Is there anything we can help?