Add support for cascade layers

[Prestaul]

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]

✅ Deploy Preview for popover-polyfill ready!

Name	Link
🔨 Latest commit	7be6579
🔍 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... Use your smartphone camera to open QR code link.

---

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

[Prestaul]

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.

[jgerigmeyer]

Thanks!

The existing pattern of just incrementing a number in the id (i.e. id="popover12) doesn't lend itself to concurrent changes.

Yes -- we're working on creating a better demo page.