Lightning web component allows you to conditional rendering of html files based on device width. According to docs, For complex tasks like conditionally rendering a template or importing a custom one, use render()
to override standard rendering functionality. This function gets invoked after connectedCallback()
and must return a valid HTML template.
Component Design
We have a lightning web component with two extra html file. Our aim is to conditional rendering the file based on the device width. Whenever the component gets rendered on mobile devices, smallScreen.html file gets rendered. Similarly, when you see the same component on large screen devices, largeScreen.html file will get rendered.

Code
renderHtml.html
This file contains blank template. We do have two other html file in the component folder which will render based on device width.
<template>
</template>
renderHtml.js
The javaScript file contains render() method which is a part of life cycle hooks. As per the code below, method return the imported html file based on device width.
import { LightningElement } from "lwc";
import smallScreen from "./smallScreen.html";
import largeScreen from "./largeScreen.html";
export default class RenderHtml extends LightningElement {
render() {
return window.screen.width < 768 ? smallScreen : largeScreen;
}
}
renderHtml.js-meta.xml
The configuration file defines the metadata values for the component, including the design configuration for Lightning App Builder and Community Builder. In simple words, It defines where you can use the component in Lightning Experience.
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="renderHtml">
<apiVersion>46.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__RecordPage</target>
<target>lightning__AppPage</target>
<target>lightning__HomePage</target>
</targets>
</LightningComponentBundle>
smallScreen.html
This file will get conditionally rendered based on device width.
<template>
This is small Screen
</template>
largeScreen.html
This file will get conditionally rendered based on device width.
<template>
This is large Screen
</template>
Demo(Conditional rendering of html files based on device width)
If you open the component in mobile, It says ‘this is small screen’ as smallScreen.html got rendered.

If you open the component in desktop, It says ‘this is large screen’ as largeScreen.html got rendered.

Why do we need the blank html file renderHtml.html ? I think this whole thing works even if that file is deleted from the bundle. Just the other two html files are needed.
For me its not working.
where did you get stuck?