[Hydration] Detect hydration mismatches when scoped templates are wrong

[nolanlawson]

Say you have two templates:

<!-- client.html -->
<template></template>

/* client.css */
:host {
  color: red;
}

<!-- server.html -->
<template></template>

/* server.scoped.css */
:host {
  color: blue;
}

If you use a dynamic render():

render() {
  return this.showA ? a : b
}

... and if showA is different on the client vs the server, then this should produce different lwc-*-host classes in the HTML versus the vdom.

With #4865 we essentially ignore the server's host scope token, so you will not see a hydration mismatch in the above case because we simply ignore the lwc-*-host given by the server.

Instead of ignoring the host scope token, we should truly validate it in the server vs the client's output.

Repro: 882ef03