primitives icon indicating copy to clipboard operation
primitives copied to clipboard

[Dialog & AlertDialog] fix: can't get id correctly in shadow dom

Open molvqingtai opened this issue 10 months ago • 4 comments

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

molvqingtai avatar Feb 16 '25 18:02 molvqingtai

Getting this merged in would be amazing.

dylnslck avatar Mar 23 '25 18:03 dylnslck

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.

peguimasid avatar Mar 29 '25 19:03 peguimasid

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!

aleksolutions avatar Apr 05 '25 11:04 aleksolutions

Nice work on the MR, would love to see this merge in so we can upgrade and no longer see these console.errors 🙏

spencermarx avatar May 04 '25 13:05 spencermarx

Also having the issue when integrating the Dialog in Shadow Dom, can't wait for this fix to be merged !

Cheers !

nicogave avatar Aug 18 '25 09:08 nicogave

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

plawgp avatar Aug 22 '25 15:08 plawgp

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?

stevencjyu avatar Oct 08 '25 09:10 stevencjyu