search

oddbird / popover-polyfill

Polyfills the HTML popover attribute and showPopover/hidePopover/togglePopover methods onto HTMLElement, as well as the popovertarget and popovertargetaction attributes on <button> elements.
https://popover.oddbird.net
BSD 3-Clause "New" or "Revised" License
269 stars 14 forks source link

`.\:popover-open` is an invalid selector? #109

Closed jpzwarte closed 1 year ago

jpzwarte commented 1 year ago

So according to the docs, the .\:popover-open selector should work in browsers where popover isn't supported yet. I can confirm that in Safari & Firefox, the class is added to the popover element. However, also in Safari & Firefox, the style rule is never applied. Perhaps because this selector is invalid?

jgerigmeyer commented 1 year ago

@jpzwarte Hm, I can't seem to reproduce this. In both Safari and Firefox I'm seeing .\:popover-open style rules applied as expected -- e.g. the [popover]:not(.\:popover-open) { display: none; } rule in the demo site.

Screenshot 2023-06-28 at 12 09 57 PM

I also tried adding a new rule to test (.\:popover-open { color: red; }), and it was also applied:

Screenshot 2023-06-28 at 12 09 49 PM

Can you push a reproducible test case?

jpzwarte commented 1 year ago

@jgerigmeyer https://codepen.io/jpzwarte/pen/dyQvRrX

Apparently the :popover-open class does not working within the shadow DOM.

jpzwarte commented 1 year ago

Closing, it needs a double backslash 🤦‍♂️