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
247 stars 14 forks source link

Add support for cascade layers #178

Closed Prestaul closed 7 months ago

Prestaul commented 7 months ago

Description

User-agent and polyfilled styles should always have lowest priority, but if a consumer uses cascade layers (i.e. @layer) then polyfilled popover styles have highest priority and overwrite other styles unless they are also in a layer. This change puts polyfilled styles into a layer so that consumers can control layer order.

Related Issue(s)

175 (original issue and discussion)

Steps to test/reproduce

Place a style that sets the background or color of any popover element into any @layer block. That style will only apply correctly after this change.

netlify[bot] commented 7 months ago

Deploy Preview for popover-polyfill ready!

Name Link
Latest commit 7be65797aa4e139f326d2fb538c1f2ecc99c2591
Latest deploy log https://app.netlify.com/sites/popover-polyfill/deploys/65c50779e156030008ed6962
Deploy Preview https://deploy-preview-178--popover-polyfill.netlify.app
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

Prestaul commented 7 months ago

I apologize for the stacked PR. This seemed the best way to avoid conflicts with my other PR, but I'm happy to break this up and just deal with conflicts and rebasing if one lands.

The main issue is in the index.html where each PR is adding a new popover and button for testing. The existing pattern of just incrementing a number in the id (i.e. id="popover12) doesn't lend itself to concurrent changes.