Merge pull request #199 from oddbird/dialog

Add support for dialog popovers.

index.html

@@ -72,7 +72,7 @@ <h1>Popover Attribute Polyfill</h1>
         Menu with shadowed popover
         <div id="menu-host"></div>
       </div>
-      <dialog popover>I'm a dialog!</dialog>
+      <dialog id="dialog" popover>This is a dialog</dialog>
       <div id="host"></div>
 
       <script type="module">
@@ -137,6 +137,7 @@ <h1>Popover Attribute Polyfill</h1>
       <button popovertarget="menu-with-shadowed-popover">
         Toggle menu with shadowed nested popover
       </button>
+      <button popovertarget="dialog">Click to toggle dialog</button>
 
       <script type="module">
         const shadowInInvoker = document.getElementById('shadowInInvoker');

src/popover.ts

@@ -71,6 +71,14 @@ ${useLayer ? '@layer popover-polyfill {' : ''}
     margin: auto;
   }
 
+  :where([popover]:not(.\\:popover-open)) {
+    display: none;
+  }
+
+  :where(dialog[popover].\\:popover-open) {
+    display: block;
+  }
+
   :where(dialog[popover][open]) {
     display: revert;
   }
@@ -105,10 +113,6 @@ ${useLayer ? '@layer popover-polyfill {' : ''}
       bottom: 0;
     }
   }
-
-  :where([popover]:not(.\\:popover-open)) {
-    display: none;
-  }
 ${useLayer ? '}' : ''}
 `;
 }

tests/basic.spec.ts

@@ -78,3 +78,8 @@ test('popover as "invalid"', async ({ page }) => {
   const popover = (await page.locator('#popover6')).nth(0);
   await expect(popover).toBeFunctionalPopover();
 });
+
+test('dialog popover', async ({ page }) => {
+  const popover = (await page.locator('#dialog')).nth(0);
+  await expect(popover).toBeFunctionalPopover();
+});