search

GoogleChrome / dialog-polyfill

Polyfill for the HTML dialog element
BSD 3-Clause "New" or "Revised" License
2.45k stars 245 forks source link

Polyfill injects overlay into <slot> on first render in iOS Safari <15.4 #234

Closed postrad closed 1 year ago

postrad commented 1 year ago

I am building custom modal-dialogue component using

inside a web component. What I'm observing is the following:

  • On first render, the overlay elements (aka div.backdrop and div._dialog)overlay) are being appended to the contents of the <slot> within the <dialog>.
  • On subsequent renders, the overlay elements appear adjacent to the <dialog> element, as expected.
  • If I remove the <slot> from the web component, it renders correctly the first time.

I will try to provide an example of this issue. I am using an xCode iOS Simulator to test this issue, and have replicated it on both iOS 15.0 and 13.7.

Edit: I forgot to mention my web component is not using ShadowDOM.

postrad commented 1 year ago

I've done a little work trying to reproduce this and have found that this issue may actually have more to do with Stencil, which is what I've used to create the web component in question. In the Stencil component, I'm calling registerDialog during componentDidLoad and I suspect is the source of the bug has something to do with that. Closing this issue as a result.