pharos
pharos copied to clipboard
Upgrade to Lit 3
The problem
Lit 3 was recently released. We're on Lit 2 and don't want to fall too far behind. Lit 3 claims to largely be a smooth upgrade, as one of the only known breaking changes is dropping IE 11 support (which we already do not support).
The solution
Upgrade to Lit 3.
Additional information
I tried briefly installing Lit 3 and running a build, but ran into a fair number of TypeScript errors as a result. These could be because Lit 3 introduced breaking changes they didn't realize.
After some tinkering, it appears that upgrading @webcomponents/scoped-custom-element-registry
along with Lit 3 gets us past all the TypeScript errors. However, it seems that doing this also breaks something with either the components themselves, or at least how Storybook works with their boolean attributes in particular. This is readily noticeable in stories around e.g. validity, where rendering ?invalidated=${args.invalidated}
(among others) in the story does not actually cause the component to render the invalidated
attribute. If we can get past that, I suspect we can get this issue as well as #745 cinched up.
I threw some time at this today. I didn't get far, but I don't know when I will get back to it so recording my findings here if it's useful to anyone else, or me in the future 😄
I updated lit as well as all the web component related dependencies and then observed three failing unit tests and focused on getting those working:
- Two were using
const event = new MouseEvent('click');
and not seeing that the spy had been called. Changing the event toconst event = new Event('click');
made them start working. I don't entirely understand why and we should answer that, but it did cause the tests to pass. - The other the was failing was this link test. For some reason, only in webkit the
activeElement
is not getting rendered fully, the last item in thecomposedPath
array is the web component, not the actual link, which is making it fail
(I do see the invalidated
issue happening that Dan mentioned as as well but didn't get to looking at it)