From 73ecce55d38482257f5544b32104fd9e4592cdb2 Mon Sep 17 00:00:00 2001
From: Konnor Rogers <konnor5456@gmail.com>
Date: Wed, 19 Jun 2024 16:05:18 -0400
Subject: [PATCH 1/2] Support anonymous custom elements

---
 src/DOMElementFilter.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/DOMElementFilter.ts b/src/DOMElementFilter.ts
index bf5ff686..c83c6345 100644
--- a/src/DOMElementFilter.ts
+++ b/src/DOMElementFilter.ts
@@ -175,7 +175,7 @@ const testNode = (val: any) => {
 }
 
 export const test: NewPlugin['test'] = (val: any) =>
-  val?.constructor?.name && testNode(val)
+  val?.constructor && testNode(val)
 
 type HandledType = Element | Text | Comment | DocumentFragment
 

From 8206426a9c9ab0dd1f5cb28e71c859c532f65c4c Mon Sep 17 00:00:00 2001
From: Konnor Rogers <konnor5456@gmail.com>
Date: Mon, 24 Jun 2024 03:30:28 -0400
Subject: [PATCH 2/2] fix multiple registration warning

---
 src/DOMElementFilter.ts     | 21 ++++++++++++++-------
 src/__tests__/pretty-dom.js | 31 +++++++++++++++++++++++++++++++
 2 files changed, 45 insertions(+), 7 deletions(-)

diff --git a/src/DOMElementFilter.ts b/src/DOMElementFilter.ts
index c83c6345..743c4e3b 100644
--- a/src/DOMElementFilter.ts
+++ b/src/DOMElementFilter.ts
@@ -158,16 +158,22 @@ const FRAGMENT_NODE = 11
 
 const ELEMENT_REGEXP = /^((HTML|SVG)\w*)?Element$/
 
+const isCustomElement = (val: any) => {
+  const {tagName} = val
+  return Boolean(
+    (typeof tagName === 'string' && tagName.includes('-')) ||
+      (typeof val.hasAttribute === 'function' && val.hasAttribute('is')),
+  )
+}
+
 const testNode = (val: any) => {
   const constructorName = val.constructor.name
-  const {nodeType, tagName} = val
-  const isCustomElement =
-    (typeof tagName === 'string' && tagName.includes('-')) ||
-    (typeof val.hasAttribute === 'function' && val.hasAttribute('is'))
+
+  const {nodeType} = val
 
   return (
     (nodeType === ELEMENT_NODE &&
-      (ELEMENT_REGEXP.test(constructorName) || isCustomElement)) ||
+      (ELEMENT_REGEXP.test(constructorName) || isCustomElement(val))) ||
     (nodeType === TEXT_NODE && constructorName === 'Text') ||
     (nodeType === COMMENT_NODE && constructorName === 'Comment') ||
     (nodeType === FRAGMENT_NODE && constructorName === 'DocumentFragment')
@@ -175,7 +181,7 @@ const testNode = (val: any) => {
 }
 
 export const test: NewPlugin['test'] = (val: any) =>
-  val?.constructor && testNode(val)
+  (val?.constructor?.name || isCustomElement(val)) && testNode(val)
 
 type HandledType = Element | Text | Comment | DocumentFragment
 
@@ -195,7 +201,8 @@ export default function createDOMElementFilter(
   filterNode: (node: Node) => boolean,
 ): NewPlugin {
   return {
-    test: (val: any) => val?.constructor?.name && testNode(val),
+    test: (val: any) =>
+      (val?.constructor?.name || isCustomElement(val)) && testNode(val),
     serialize: (
       node: HandledType,
       config: Config,
diff --git a/src/__tests__/pretty-dom.js b/src/__tests__/pretty-dom.js
index 889d0fed..69229995 100644
--- a/src/__tests__/pretty-dom.js
+++ b/src/__tests__/pretty-dom.js
@@ -166,3 +166,34 @@ test('prettyDOM supports a COLORS environment variable', () => {
   process.env.COLORS = 'true'
   expect(prettyDOM(container)).toEqual(withColors)
 })
+
+test('prettyDOM supports named custom elements', () => {
+  window.customElements.define(
+    'my-element-1',
+    class MyElement extends HTMLElement {},
+  )
+
+  const {container} = render('<my-element-1>Hello World!</my-element-1>')
+
+  expect(prettyDOM(container)).toMatchInlineSnapshot(`
+    <div>
+      <my-element-1>
+        Hello World!
+      </my-element-1>
+    </div>
+  `)
+})
+
+test('prettyDOM supports anonymous custom elements', () => {
+  window.customElements.define('my-element-2', class extends HTMLElement {})
+
+  const {container} = render('<my-element-2>Hello World!</my-element-2>')
+
+  expect(prettyDOM(container)).toMatchInlineSnapshot(`
+    <div>
+      <my-element-2>
+        Hello World!
+      </my-element-2>
+    </div>
+  `)
+})