google / playground-elements

Serverless coding environments for the web.
BSD 3-Clause "New" or "Revised" License
549 stars 55 forks source link

Using with Lit 3 causes JavaScript errors #406

Open dlockhart opened 5 months ago

dlockhart commented 5 months ago

When upgrading our project that leverages <playground-elements> to Lit 3, I noticed that the usage of <mcw-list> 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.

It looks like @justinfagnani did add support for Lit 3 (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 <mcw-*> 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 (FYI @AndrewJakubowicz).