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.
BSD 3-Clause "New" or "Revised" License
259 stars 14 forks source link

overriding the popover data attribute styles with a class #131

Closed thejackshelton closed 1 year ago

thejackshelton commented 1 year ago

I've come across an interesting problem for the popover api, we have styles provided by the user agent stylesheet (browser) for the native API. For unsupported browsers we're using the polyfill, but from what I understand it makes use of a data attribute.

Data attributes in turn have the same specificity as a class. What this means, is that for unsupported browsers the user cannot override styles declared by the stylesheet unless it's an inline style or !important.

I had considered using @layer, but it doesn't seem like I can control that when making a generic popover component. Any ideas?

thejackshelton commented 1 year ago

Ah I figured it out. Polyfill styles need to be at appended at the beginning of the head so that classes can override them in the cascade

 document.head.insertBefore(styleNode, document.head.firstChild);