I am feeling a bit confused about the process of referencing and importing my Lit components. It seems like the components are not being included in my esbuild bundle because they are not properly referenced.
Let's take for example ParentComponent which is supposed to render ChildComponent using <child-component>.
export class ParentComponent extends LitElement
{
protected render(): TemplateResult
{
return html`<child-component></child-component>`;
}
}
Pardon my lack of knowledge regarding Lit/web components terminology, but as a web component itself, I assume that <child-component> gets resolved at runtime. However, since ChildComponent is never imported or referenced, it does not get included in the bundle. As a result, <child-component> is not registered by Lit, causing things to not work as expected.
If I import ChildComponent and modify the code as shown below, ChildComponent gets bundled and everything functions correctly:
protected render(): TemplateResult
{
console.log(ChildComponent);
return html`<child-component></child-component>`;
}
What should I be doing differently? How can I ensure that my components are included in the bundle even if importing ChildComponent in the initial example would still not include it due to being unused?