Is it - or will it - be possible to have multiple versions of Lit in the same application?

[andberg]

👋 I'm part of a team that's building a design system with Lit. Our components are verisioned separately, so we don't have one single version for the entire design system.
When we now started to upgrade our components to Lit 2 we discovered that this will become an issue for our design system users. They would need to upgrade all their UI-components at the same time, which causes unexpected work for them. This is of course our problem and we will handle it, but it made me wonder two things:

1. Is it documented somewhere that different versions of Lit can't be used in the same application / DOM? I've looked, but have not found it, but I might have missed it?
2. Have you guys discussed this, is it something that might be possible in future versions of Lit?

This is my first interaction with OSS; so have I missed something please just ask!

[justinfagnani]

Yes, you can multiple versions of Lit, and with Lit 2 (lit-html 2.x and lit-element 3.x) onward, we even have very good compatibility across versions - you can use a template from one version in a render method of another.

Lit is just a library, so it uses no globals. And each component is its own independent render root, so there's no central coordinator. Essentially each component brings along the version of Lit it needs and the module cache takes care of deduplication.

If you're upgrading from LitElement 2 / lit-html 1, then there can be some issues where the templates from one version will not render in the other. Components are still independent though, so if you upgrade a component at a time, you should be ok. The difficulty with be with subclassing and utility templates. A subclass will need to update its Lit dependency with its base class.

[andberg]

Thank you for your reply! After some digging this was our issue. We had in some of our components references to the same dependency (due to subclasses) where one were in Lit 1 version and the other Lit 2. So after we cleaned up our dependency-chains - so we only reference a dependency once - it worked perfectly.

We went from BaseClass -> FormBaseClass -> ComponentClass with its own reference and dependency to BaseClass to only refer to FormBaseClass from ComponentClass.