search

GoogleChrome / dialog-polyfill

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

support shadow DOM without css #136

Closed samthor closed 4 years ago

samthor commented 7 years ago

Adds basic support for Shadow DOM. Leverages a helper gist which gives the actual focused element within shadow roots.

This doesn't deal with the CSS problem: each shadow root needs a copy of the dialog CSS.

trescenzi commented 6 years ago

What's the status of this? I was about to file something similar and noticed that this already existed. Are there any plans for it to be integrated into master?

samthor commented 6 years ago

So this would work fine but I was a bit loathe to insert it as the CSS story is a bit awkward. It would be better/easier if I changed the polyfill to automagically insert the CSS, then it follows that it should automagically insert it into shadow roots too.

What's your use case? I suppose the only browser that needs this right now is Safari.

trescenzi commented 6 years ago

My use case is an internal custom dialog. So most of the CSS doesn't actually matter to us although we use some of it. We wrap a dialog in a custom element and slot in user content and then style it as design wants us to.

I came across needing these changes primarily because of the modal checks, document.body.contains instead of isConnected, which actually prevents modal usage in all browsers within shadow DOM if I'm not mistake.

trescenzi commented 6 years ago

I was working with this some more today and it turns out that even with these changes, and discounting the CSS questions, dialog is still a little awkward to use within shadow DOM. Because querySelector can't select children within <slot>s the focus management as written actually won't work if you slot content into the dialog. For example in a custom element's template:

<template>
  <dialog>
    <slot></slot>
  </dialog>
</template>

Any content that's slotted won't actually be focusable. While this makes sense from a web component perspective, given the implementation, it was surprising at first.

You can see a complete example in this fiddle. Note the problem only is reproducible in browsers that don't need shadow DOM polyfilled, but do need dialog polyfilled(Safari).

I don't know what, if anything, this actually means for the polyfill and this PR but I wanted to bring it up since it prevented me from continuing to use the polyfill within shadow DOM.

akc42 commented 5 years ago

Has this PR been forgotten, or has it been overtaken by something else?