test: add karma test showing hydration mismatch when a child componen…

…t has scopd styles and a custom HTML template

packages/@lwc/integration-karma/test-hydration/host-token/index.spec.js

@@ -0,0 +1,8 @@
+export default {
+    advancedTest(target, { Component, hydrateComponent, consoleSpy }) {
+        hydrateComponent(target, Component, {});
+
+        expect(consoleSpy.calls.warn).toHaveSize(0);
+        expect(consoleSpy.calls.error).toHaveSize(0);
+    },
+};

packages/@lwc/integration-karma/test-hydration/host-token/x/component/component.js

@@ -0,0 +1,12 @@
+import { LightningElement } from 'lwc';
+import style from './component.scoped.css';
+import html from './template.html';
+
+export default class extends LightningElement {
+    static renderMode = 'light';
+    static stylesheets = [style];
+
+    render() {
+        return html;
+    }
+}

packages/@lwc/integration-karma/test-hydration/host-token/x/component/component.scoped.css

@@ -0,0 +1,3 @@
+h1 {
+    color: red;
+}

packages/@lwc/integration-karma/test-hydration/host-token/x/component/template.html

@@ -0,0 +1,4 @@
+<template lwc:render-mode="light">
+    <span>hello</span>
+</template>
+

packages/@lwc/integration-karma/test-hydration/host-token/x/main/main.html

@@ -0,0 +1,4 @@
+<template lwc:render-mode="light">
+    <x-component></x-component>
+</template>
+

packages/@lwc/integration-karma/test-hydration/host-token/x/main/main.js

@@ -0,0 +1,5 @@
+import { LightningElement } from 'lwc';
+
+export default class extends LightningElement {
+    static renderMode = 'light';
+}