refactor(core): add actionable hydration mismatch hints - #68529

Adds targeted hints for known browser HTML normalization cases that alter the DOM before Angular hydration.

Closes #56392

What is the current behavior?

Currently, the message may be somewhat generic and not indicate the real or complete cause of the problem.

What is the new behavior?

Missing explicit <tbody>

Spec :

“A tbody element's start tag may be omitted if the first thing inside the
tbody element is a tr element”

When a <tr> is written directly under <table>, the parser can
create the missing table body section before Angular hydrates.

See: https://html.spec.whatwg.org/multipage/syntax.html#optional-tags

<!-- User template -->
<table>
  <tr></tr>
</table>

<!-- DOM shape used for hydration -->
<table>
  <tbody>
    <tr></tr>
  </tbody>
</table>

Missing explicit <colgroup>

Spec :

“A colgroup element's start tag may be omitted if the first thing inside the
colgroup element is a col element”

When a <col> is written directly under <table>, the parser can
create the missing column group before Angular hydrates.

See: https://html.spec.whatwg.org/multipage/syntax.html#optional-tags

<!-- User template -->
<table>
  <col>
</table>

<!-- DOM shape used for hydration -->
<table>
  <colgroup>
    <col>
  </colgroup>
</table>

Nested anchors

Spec:

“Transparent, but there must be no interactive content descendant, a element
descendant, or descendant with the tabindex attribute specified.”

Parser:

“the first a element would be closed upon seeing the second one”

Nested links are invalid and the parser can close/restructure the
outer anchor before Angular hydrates.

See: https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-a-element
See: https://html.spec.whatwg.org/multipage/parsing.html#parsing-main-inbody

<!-- User template -->
<a>
  Outside
  <a>Click me</a>
</a>

<!-- DOM shape used for hydration -->
<a>
  Outside
</a>
<a>Click me</a>

Block content inside <p>

Spec :

“A p element's end tag can be omitted if the p element is immediately
followed by” elements like div, table, headings, lists, or another p.

The parser closes the paragraph before inserting the block, so
the block becomes a sibling instead of a child.

See: https://html.spec.whatwg.org/multipage/grouping-content.html#the-p-element

<!-- User template -->
<p>
  <div>Hello world!</div>
</p>

<!-- DOM shape used for hydration -->
<p></p>
<div>Hello world!</div>
<p></p>

Nested buttons

Spec :

“Phrasing content, but there must be no interactive content descendant and no
descendant with the tabindex attribute specified.”

Parser:

“If the stack of open elements has a button element in scope” then the parser
generates implied end tags and pops elements “until a button element has been
popped”.

When the parser sees the inner <button>, it closes the current
button first, so the buttons become siblings instead of nested nodes.

See: https://html.spec.whatwg.org/multipage/form-elements.html#the-button-element
See: https://html.spec.whatwg.org/multipage/parsing.html#parsing-main-inbody

<!-- User template -->
<button>
  outside button
  <button>inner button</button>
</button>

<!-- DOM shape used for hydration -->
<button>
  outside button
</button>
<button>inner button</button>