Separate language for each component instance in LitElement

[Peter Siska]

I just noticed that using multiple web component instances will always set the language in all components to the one defined / used in the last component. I assume this is because the language event used to determine / set the language is global and all component instances listen to the same event?

I will try to make a reproducible case online for this.

[Peter Siska]

You can actually see this in action even in your CodePen demo. I made a fork where I use the same component twice:

https://codepen.io/peschee/pen/QWywKdM?editors=1010

Changing the language in one component affects the other one and vice versa. Ideally, the language should be contained to one instance of a component.

[Peter Siska]

I think I figured it out. Im my case (using LitElement), the key is not to use the translate function but to use get directly.

Since translate listens to an event, it will always reflect language changes across all components in LitElement. However, we can use get instead of translate and trigger component updates manually once the language changes, e.g. by

use(language).then(() => this.requestUpdate());

I have forked the CodePen example with a working version of this:

https://codepen.io/peschee/pen/vYLEVod

[Peter Siska]

Sorry, I have to reopen this. There seems to be an issue with using properties & attributes. I have extended my last example with a lang property and observed attribute and now the example does not work anymore:

https://codepen.io/peschee/pen/mdVyQmQ

The language in both components is always set to the property of the last component initialized. Any ideas on how to solve this?

[Amandine Dekens]

Hello, this issue is still existing. Is there a way to fixed it @andreasbm ?