Don't allow custom-elements to self close (#298)

* Don't allow custom-elements to self close * Add changeset
withastro · Oct 21, 2022 · 485fb91 · 485fb91
1 parent b99b461
commit 485fb91
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 2 deletions.
diff --git a/.changeset/tiny-parents-refuse.md b/.changeset/tiny-parents-refuse.md
@@ -0,0 +1,5 @@
+---
+'prettier-plugin-astro': minor
+---
+
+Fixed custom-elements being allowed to self close despite the HTML spec saying otherwise
diff --git a/src/printer/index.ts b/src/printer/index.ts
@@ -102,9 +102,19 @@ export function print(path: AstPath, opts: ParserOptions, print: printFn): Doc {
 			} else {
 				isEmpty = node.children.every((child) => isEmptyTextNode(child));
 			}
+
+			/**
+			 * An element is allowed to self close only if:
+			 * It is empty AND
+			 *  It's a component OR
+			 *  It's in the HTML spec as a void element OR
+			 *  It has a `set:*` directive
+			 */
 			const isSelfClosingTag =
 				isEmpty &&
-				(node.type !== 'element' || selfClosingTags.includes(node.name) || hasSetDirectives(node));
+				(node.type === 'component' ||
+					selfClosingTags.includes(node.name) ||
+					hasSetDirectives(node));
 
 			const isSingleLinePerAttribute = opts.singleAttributePerLine && node.attributes.length > 1;
 			const attributeLine = isSingleLinePerAttribute ? breakParent : '';

diff --git a/test/fixtures/basic/html-custom-elements/output.astro b/test/fixtures/basic/html-custom-elements/output.astro
@@ -1 +1 @@
-<custom-element />
+<custom-element></custom-element>