popover-polyfill: Problems with overwriting popover styling for Firefox
I’m currently working on a popover component and I’d like to overwrite some styling for the [popover] like overflow to visible etc., but in the Firefox it doesn’t work. Since there are styles added in the popover.ts file in the polyfill it looks like I cannot overwrite those styles in my app. It seems those styles from polyfill’s popover.ts file have the highest specificity.
About this issue
- Original URL
- State: closed
- Created 8 months ago
- Comments: 16 (9 by maintainers)
I’ll try a solution using
:wheretomorrow and see what impacts that has, but it seems like a good solution.As a workaround for now, @anna-lach, you could increase specificity by, for example, using
[popover][popover](that’s not a typo, use the popover attribute selector twice) in your selectors.That makes sense. It’s too bad there’s no way for polyfills to inject styles at the ‘presentational hints’ level of the cascade (between browser and author styles)… It would be a difficult pitch to the working group if that’s the only use-case, but might have other use-cases, the more authors are relying on shadow DOM. Should a site should be able to apply global defaults that underly custom element defaults? Seems like people would put their resets into a layer like that.
I think I know the issue.
The popover style sheet is appended to the document, so that light DOM popovers work, but
:hoststyles always take lower precedent than the light DOM styles.If you open this codepen you’ll see a pink border. If you comment out line 19 (
this.ownerDocument.adoptedStyleSheets.push(styles)) you’ll get a green one.I’m not sure what the resolution here is…
@anna-lach This is released in v0.3.4.