[thelastbackspace]

What is the current behavior?

GitHub Issue Number: #3218

A non-shadow component that only renders <slot> can't be matched with toEqualHtml. The slot reference comment gets dropped from the output because spec pages set removeHtmlComments, but the serializer still counts it as a child, so with pretty printing <cmp-a></cmp-a> comes out as <cmp-a>\n</cmp-a> and the match fails.

What is the new behavior?

In serializeNodeToHtml, when an element's children are only comments that will be removed (plus optional whitespace text), the element is treated as empty, the same way a single whitespace text child already is. I pulled the existing "is this comment removed" check into a small isRemovedComment helper so the comment branch and the new check use the same rule (hydrate annotations are still kept). The same check is used for the newline after a serialized shadow root, so a shadow component whose light DOM only holds a removed comment still prints its closing tag on its own line like before.

Nothing changes when removeHtmlComments is off.

Documentation

N/A

Does this introduce a breaking change?

• Yes
• No

Testing

• New cases in src/mock-doc/test/serialize-node.spec.ts: only removed comments (pretty and not), removed comments with whitespace, content next to a removed comment, comments kept when not removed, and a shadow root whose light DOM only has a removed comment.
• New newSpecPage test in src/runtime/test/scoped.spec.tsx with the component from the issue, checking expect(page.root).toEqualHtml('<cmp-a></cmp-a>').

The two "only removed comments ... pretty" cases and the spec page test fail without the fix. I also ran npx jest src/mock-doc src/runtime src/testing src/hydrate after npm run build and everything passes.

Other information

The issue also mentions scoped: true components, which go through the same path.