Merge pull request #178 from Prestaul/175-cascade-layers-support

Add support for cascade layers

README.md

@@ -142,6 +142,11 @@ some caveats which will need accommodations:
     now is to add `!important` to conflicting properties in your `:host` rule.
     See [#147](https://github.com/oddbird/popover-polyfill/issues/147) for more.
 
+- When supported, the polyfill creates a cascade layer named `popover-polyfill`.
+  If your styles are not in layers then this should have no impact. If your
+  styles do use layers, you'll need to ensure the polyfill layer is declared
+  first. (e.g. `@layer popover-polyfill, other, layers;`)
+
 ## Contributing
 
 Visit our [contribution guidelines](https://github.com/oddbird/popover-polyfill/blob/main/CONTRIBUTING.md).

index.html

@@ -5,6 +5,15 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Popover Attribute Polyfill</title>
+    <style>
+      @layer popover-polyfill;
+
+      @layer consumer {
+        #popover13 {
+          background-color: #d00d1e;
+        }
+      }
+    </style>
     <script src="./dist/popover.js"></script>
   </head>
 
@@ -47,6 +56,9 @@ <h1>Popover Attribute Polyfill</h1>
         </div>
       </div>
       <div id="popover12" popover>Popover 12</div>
+      <div id="popover13" popover>
+        Popover 13 (should be red if browser has @layer support)
+      </div>
       <dialog popover>I'm a dialog!</dialog>
       <div id="host"></div>
 
@@ -92,6 +104,7 @@ <h1>Popover Attribute Polyfill</h1>
       <button popovertarget="popover12">
         <span id="shadowInInvoker"></span>
       </button>
+      <button popovertarget="popover13">Click to toggle Popover 13</button>
 
       <script type="module">
         const shadowInInvoker = document.getElementById('shadowInInvoker');

src/popover.ts

@@ -34,10 +34,12 @@ function patchSelectorFn<K extends string>(
 }
 
 const nonEscapedPopoverSelector = /(^|[^\\]):popover-open\b/g;
+const hasLayerSupport = typeof window.CSSLayerBlockRule === 'function';
 
 // To emulate a UA stylesheet which is the lowest priority in the cascade,
 // all selectors must be wrapped in a :where() which has a specificity of zero.
 const styles = `
+${hasLayerSupport ? '@layer popover-polyfill {' : ''}
   :where([popover]) {
     position: fixed;
     z-index: 2147483647;
@@ -93,6 +95,7 @@ const styles = `
   :where([popover]:not(.\\:popover-open)) {
     display: none;
   }
+${hasLayerSupport ? '}' : ''}
 `;
 let popoverStyleSheet: null | false | CSSStyleSheet = null;
 export function injectStyles(root: Document | ShadowRoot) {

tests/edge-cases.spec.ts

@@ -20,3 +20,10 @@ test("removing an autoPopover from document doesn't crash page", async ({
   ).toBeUndefined();
   await expect(popover2).toBeVisible();
 });
+
+test('styles in layers are winning over polyfilled styles', async ({
+  page,
+}) => {
+  const popover = (await page.locator('#popover13')).nth(0);
+  await expect(popover).toHaveCSS('background-color', 'rgb(208, 13, 30)');
+});