feat: Support anonymous custom elements when pretty printing DOM (#1319)

Author: KonnorRogers

src/DOMElementFilter.ts

@@ -158,24 +158,30 @@ 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')
   )
 }
 
 export const test: NewPlugin['test'] = (val: any) =>
-  val?.constructor?.name && 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,

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>
+  `)
+})