lit-element | simple base class for creating fast | Web Framework library

I want to compose a LitElement widget from two other widgets. The basic idea would be that one "selector" widget selects something, send an event to its parent "mediator" one, which in turns would update the related property in a "viewer" child widget (event up, property down). This follows the "mediator pattern" example of the documentation about composition, only that I need to deal with fully separated classes.

Below is a minimum working example, which builds and run in the LitElement TypeScript starter template project, with all dependencies force-updated with ncu --upgradeAll.

The desired behavior would be that the Viewer widget does render the item["name"] when the user selects something in the dropdown list.

So far, I managed to send an event up from the Selector to the Mediator, and to update the item_id attribute within the Viewer. However, this does not seem to trigger an update of the item_id property of the Viewer.

The approach used is to override updated in the Mediator (l.36), loop through its children and do a child.setAttribute, which is probably highly inelegant. There is surely another —cleaner— way, but I failed to clearly understand the update sequence of Lit.

I'm busy migrating a static js/html application to Lit. I'm finding the platform to be the most easy to migrate old static code to a framework.

However, I'm having some big issues where rendered code are modified externally. Let me explain:

I'm working with a customElement using Shadow DOM like:

I trying to create a simple Vaadin component (like Button) that reacts on press and release events. On press event it must start sound record from microphone and on release it must upload recorded data to the backend. I think that is good choice for uploading is use Upload Vaadin component. I found examples of how to record and play recorded data on page, but i cannot find a way how to start collect it with Upload component. And i am not sure that if create component for Vaadin 14 + Lit it will be useful in next LTS releases. Please point me how to start develop my component.

Found npm for sound record: link

And for creating Lit-component: link

Or maybe there is some other possibilies, like custom StreamResource that will send recorded data from browser to backend without using Upload class?

In lit/lit-html/lit-element, a standard component is the TemplateResult (usually HTMLTemplateResult), created like:

I'm trying to switch my state management in a lit-element based application from simple global variables to redux. Following the redux tutorials I installed the redux toolkit and created a simple reducer and store.

Building the app with rollup succeeds but when I load the app in Chrome I get the following error:

I would like to convert my existing Javascript CustomElements/WebComponents (made with Lit v1 and ported to v2) to TypeScript.

Example:

Vaadin suddenly stops to build my library with the following error. I already did the Vaadin dance (and a lot of more stuff) but I'm running out of ideas now. I try to build the library for production (but it also fails for dev).

I'm using Vaadin Flow. The issue tracker on Github redirected here for general community help - so I hope anyone has an idea how to solve this problem or what else I can try.

I am working with Vaadin 14.7.5, so vaadin-grid 5.9.0.

A single vaadin-grid element containting a single vaadin-grid-tree-toggle element is inside a Lit Element.