Open peschee opened 4 years ago
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.
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:
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?
Hello, this issue is still existing. Is there a way to fixed it @andreasbm ?
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.