google / google/playground-elements

Using with Lit 3 causes JavaScript errors

Open
#406 0 comments 1 reaction 0 assignees View on GitHub
Dominant language
TypeScript
Stars
648
Forks
61
PR merge metrics
No merged PRs in 30d

Description

When upgrading our project that leverages `` to Lit 3, I noticed that the usage of `` components when the "editable filesystem" feature is enabled causes JavaScript errors.

This is from this project's demo when setting `"overrides": { "lit": "^3" }` and upgrading to Lit 3 in its `package.json` and simply opening one of those menus:

Screenshot 2024-05-28 at 10 35 22 AM

```
TypeError: Failed to execute 'assignedNodes' on 'HTMLSlotElement': The provided value is not of type 'AssignedNodesOptions'.
at List.get [as assignedElements] (query-assigned-nodes.js:6:166)
at List.updateItems (mwc-list-base.js:84:34)
at List.layout (mwc-list-base.js:361:18)
at List.onListItemConnected (mwc-list-base.js:357:14)
at I.handleEvent (lit-html.js:6:6509)
at ListItem.firstUpdated (mwc-list-item-base.js:188:14)
at ListItem._$AE (reactive-element.js:6:5072)
at ListItem.performUpdate (reactive-element.js:6:4956)
at ListItem.scheduleUpdate (reactive-element.js:6:4427)
at ListItem._$ET (reactive-element.js:6:4335)
```

I suspect they need to switch from [the deprecated queryAssignedNodes to queryAssignedElements](https://lit.dev/docs/releases/upgrade/#removed-queryassignednodes-non-object).

It looks like @justinfagnani [did add support for Lit 3](https://github.com/google/playground-elements/pull/382) (although that code change still hasn't been released on NPM), but that PR description references a "MWC update [that] is going to be a bit more invasive". Since those `` components have been deprecated (and don't support Lit 3) in favour of `@material/web`, I'm guessing that's what Justin's referring to.

I think you'll run into this same issue when you [upgrade Lit.dev itself to Lit 3](https://github.com/lit/lit.dev/issues/1269) (FYI @AndrewJakubowicz).

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.