Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Upgrade to Lit 3 #634

Open
daneah opened this issue Oct 12, 2023 · 2 comments
Open

Upgrade to Lit 3 #634

daneah opened this issue Oct 12, 2023 · 2 comments

Comments

@daneah
Copy link
Member

daneah commented Oct 12, 2023

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.

@daneah
Copy link
Member Author

daneah commented May 8, 2024

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.

@brentswisher
Copy link
Contributor

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 to const 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 the composedPath 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)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants