Best practices for internationalization/localization with lit-element/lit-html

Question

Thank you for reading.

I am new to polymer/lit-element,lit-html. I have started with the PWA starter kit. And at my surprise it doesn't use polymer elements but lit-elements.

I have tried to apply the default app-localize-behaviour from https://polymer-library.polymer-project.org/3.0/docs/apps/localize .

Without success.

Using mixinBehaviors with PageViewElement seems to break.

mixinBehaviors([AppLocalizeBehavior], PageViewElement) 

End up on an error of the type:

TypeError: this.constructor._classProperties is undefined

I saw in the same time there has been several libraries starting to flourish like:

https://github.com/andreasbm/lit-translate

Or:

https://github.com/hamedasemi/lit-element-i18n

So, I must admit I am now lost, in what should I do to do internationalization or localization with lit-element and lit-html.

Is there any recommended library, did I miss a post about what is the official recommended way?

Thank you in advance, and have a lovely day.

Handle

Answer 1

I don't think there is an official solution, and lit-element is still to young to have seen a consensus emerge within the users, so there is many solutions, each one trying it thing.

For my part, I have tested (not in production, only on small sides projects) lit-translate that you cite, and https://vaadin.com/directory/component/t2ymi18n-element

Both seems to work pretty good. The second one is maintained by a team that is serious and follow their components. I have worked with some of theirs before, and never had any important issues. I don't know who is maintaining the first one, but it seems to be answers on issues, and regular updates, so they seems serious too.

I think you can go and try the one that seems easier to use, and don't hesitate to come add feedback on them, it will serve to everyone :)

Convection

Answer 2

Google published an official solution with the release of Lit 2.0, available on npm as @lit/localize. Here is the documentation: https://lit.dev/docs/libraries/localization/

Passage