Fixes attribute rendering for popover

.changeset/cool-walls-burn.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fixes rendering of the `popover` attribute when it has a boolean value

packages/astro/src/runtime/server/render/util.ts

@@ -115,6 +115,11 @@ Make sure to use the static attribute syntax (\`${key}={value}\`) instead of the
 		return markHTMLString(` ${key}`);
 	}
 
+	// Popover seems to be boolean, but it can actually have the value "auto" or "manual"
+	if (key === 'popover' && typeof value === 'boolean') {
+		return markHTMLString(value ? ` popover` : '');
+	}
+
 	return markHTMLString(` ${key}="${toAttributeString(value, shouldEscape)}"`);
 }
 

packages/astro/test/astro-attrs.test.js

@@ -16,6 +16,10 @@ describe('Attributes', async () => {
 		const $ = cheerio.load(html);
 
 		const attrs = {
+			'popover-auto': { attribute: 'popover', value: 'auto' },
+			'popover-true': { attribute: 'popover', value: '' },
+			'popover-false': { attribute: 'popover', value: undefined },
+			'popover-string-empty': { attribute: 'popover', value: '' },
 			'boolean-attr-true': { attribute: 'allowfullscreen', value: '' },
 			'boolean-attr-false': { attribute: 'allowfullscreen', value: undefined },
 			'boolean-attr-string-truthy': { attribute: 'allowfullscreen', value: '' },

packages/astro/test/fixtures/astro-attrs/src/pages/index.astro

@@ -1,3 +1,8 @@
+<dialog id="popover-auto" popover={'auto'} />
+<dialog id="popover-true" popover={true} />
+<dialog id="popover-false" popover={false} />
+<dialog id="popover-string-empty" popover={''} />
+
 <span id="boolean-attr-true" allowfullscreen={true} />
 <span id="boolean-attr-false" allowfullscreen={false} />
 <span id="boolean-attr-string-truthy" allowfullscreen={'foo'} />