LitHtml v2 updates

[Jack Franklin]

Hi all,

We have recently completed the upgrade from LitHtml v1 to LitHtml v2 (design doc here) and I wanted to share a quick update on the main changes - goo.gle/building-ui-devtools has been updated if you need more details. I wanted to highlight that Lit 2 supports “static expressions”, which means that in a LitHtml template we can write: 

<${Breadcrumbs.litTagName}></${Breadcrumbs.litTagName}>

Where:

Breadcrumbs.litTagName = LitHtml.literal`devtools-elements-breadcrumbs`

To render one Lit component from another, . This allows us to enforce that a component imports any components that it renders, rather than having the possibility of writing <devtools-elements-breadcrumbs> in a template and forgetting to import the component, which is easily missed. We're migrating all components to use this approach and have introduced ESLint rules to enforce it going forwards. Please shout if you have any questions :)

Thanks,

Jack