---
author: Bram Kragten
authorURL: https://twitter.com/bramkragten
authorTwitter: bramkragten
title: Upgrade to Lit 2.0
---

We upgraded our frontend to use Lit 2.0, this is a major bump of both `LitElement` (3.0) and `lit-html` (2.0) that will now go further under the name [Lit](https://lit.dev) together.

This upgrade comes with a ton of great [improvements](https://lit.dev/blog/2021-04-21-lit-2.0-meet-lit-all-over-again/), but also with some breaking changes.

If you have developed a custom card or view, and are using `LitElement` and `lit-html` from our components, your component will be using Lit 2.0 in the next release (2021.6). If you don't know if you are using `LitElement` from our components, your code will look something like this:

```ts
const LitElement = Object.getPrototypeOf(customElements.get("ha-panel-lovelace"));
const html = LitElement.prototype.html;
const css = LitElement.prototype.css;
```

This is not a recommended practice, we advise you to bundle Lit into your component, or import it from `unpkg.com` or another source like in this [example](https://developers.home-assistant.io/docs/frontend/custom-ui/custom-card#advanced-example). This way your card is not depending on the Lit version that is shipped with Home Assistant.

One of the things that changed, is that the creation of the `shadowRoot` is no longer done in the constructor, but just before the first update. This means that if you directly interact with the DOM, like with a query selector, you can no longer assume `shadowRoot` will always be available.

For all the changes check the [upgrade guide](https://lit.dev/docs/releases/upgrade/) in the Lit documentation.

We expect most of the cards to work without issues with Lit 2.0, but ask custom card developers to ensure compatibility. You can do this using the current dev version of Home Assistant or by using a nightly version of Home Assistant, both currently use Lit 2.0.
