Currently, I am encountering an issue with importing two lit elements in my project, namely RootElement and CustomElement. The problem arises when trying to import CustomElement, which unlike RootElement does not show up properly on the UI. My attempt to include it within the render() method of RootElement also did not yield the desired outcome.
render() {
return html`<script
type="module"
src="./path/to/customelement.ts"
></script>
<custom-element></custom-element>`;
}
Upon further inspection, adding an import statement for CustomElement resulted in it being marked as "unused" since it was not utilized anywhere in the codebase:
import { CustomElement } from "./path/to/customelement.ts";
It was only after explicitly including CustomElement in the code (even as a standalone statement) that the element rendered properly without being labeled as "unused". This brings me to question: what adjustments should be made in the tsconfig.js file to ensure this dependency is recognized by the transpiler without the need for extraneous statements?