renderMode mismatch between template/compiler and light/shadow causes console.error but no error

[nolanlawson]

If you mismatch a template in one render mode with a component in another render mode:

<template lwc:render-mode=light>
</template>

export default class extends LightningElement {
  static renderMode = 'shadow'
}

Then you get a console.error but no actual error:

lwc/packages/@lwc/engine-core/src/framework/template.ts

Lines 107 to 123 in 2323170

	if (vm.renderMode === RenderMode.Light) {
	if (template.renderMode !== 'light') {
	logError(
	`Light DOM components can't render shadow DOM templates. Add an 'lwc:render-mode="light"' directive to the root template tag of ${getComponentTag(
	vm
	)}.`
	);
	}
	} else {
	if (!isUndefined(template.renderMode)) {
	logError(
	`Shadow DOM components template can't render light DOM templates. Either remove the 'lwc:render-mode' directive from ${getComponentTag(
	vm
	)} or set it to 'lwc:render-mode="shadow"`
	);
	}
	}

At runtime, the only thing that matters is the component renderMode, not the template renderMode (except for this console.error).

We should make this an actual error. This would allow us to know with 100% confidence whether a template will be treated as light DOM or shadow DOM. This would help with e.g. the @lwc/template-compiler (which has certain restrictions on light vs shadow DOM, e.g. lwc:dom="manual" or scoped slots) as well as the new @lwc/ssr-compiler (it would be easier to know that a <slot> for example is light vs shadow).

Repro: 92d0bdd