An extension of a Lit-Element allowing for easy addition of internationalization dictionaries.

README.md

Lit-Element i18n (Internationalization)

Quickly internationalize your lit-elements using simple word replacement dictionaries.

Dictionnary

Fill in the dictionnary object with a lookup for each language to be supported. Use the default key as the primary/fallback language. The HTML tag's lang attribute will be used to choose the best dictionnary automatically.

this.i18n

Use the this.i18n object to access the chosen dictionary's content. Use it in the HTML template and anywhere in your code where you need to get an internationalized word.

Warning

This is a quick and dirty hack and isn't necessarily the most optimized option out there. If you're just looking for a quick way to internationalize a small amount of words, Lit-Element i18n could work for you.

But if you're looking for something more robust and efficient, you may need something else. In fact, lit itself is working on its own internationalization tools.

LitElementI18N.js

/*
	LITE-ELEMENT-I18N
	Lit Element i18n © 2021 by David Blanchard is licensed under CC BY 4.0

	Extension of the lit-element to add base support for an i18n dictionnary.
*/

import {LitElement} from "lit";

/**
 * Lit-Element extended with i18n dictionnary functionnality.
 */
export class LitElementI18N extends LitElement {

	/** Compiled internationalization values dictionnary. */
	get i18n () {
		let lang = document.documentElement.lang.toLowerCase();
		return {
			...(this?.dictionnaries?.default || {}),
			...(this?.dictionnaries?.[lang] || {})
		};
	}

	/**
	 * The dictionnaries to be compiled. The key of each dictionnary should be a 2-letter
	 * language code (e.g. "fr" or 'en"). The default dictionnary uses the "default" key.
	 */
	dictionnaries = {}
}

LitElementI18N_Scaffold.js

import {LitElementI18N} from "LitElementI18N";
import {html, css} from "lit";

class MyElement extends LitElementI18N {
	/**
	 * Reactive Properties
	 */
	static properties = {
		name: {type: String, attribute: true, reflect: false},
	};
	
	
	/**
	 * CSS Shadow Root Styles
	 */
	static styles = css`
		div { color: red; }
	`;


	/**
	 * HTML Template
	 */
	render() {
		return html`<div>${this.i18n.styled}</div>`;
	}
	
	
	dictionnaries = {
		default: {
			styled: "I'm being styled!",
		},
		
		fr: {
			styled: "Un style s'applique à moi!",
		}
	}


	// LIFECYLE METHODS ---------------------------------------------------------------------------

	/**
	 * Element is created or upgraded.
	 * (One time initialization tasks)
	 */
	constructor() {
		super();
	}


	/**
	 * Component was added to the document's DOM.
	 * (Add event listeners)
	 */
	connectedCallback() {
		super.connectedCallback();
	}


	/**
	 * Component was removed from the document's DOM.
	 * (Undo connected callback)
	 */
	disconnectedCallback() {
		super.disconnectedCallback();
	}


	/**
	 * Element's DOM has been updated for the first time.
	 * (Perform work after component's DOM created)
	 * @param changedProperties {Map} keys are names of changed props, values are previous values.
	 */
	firstUpdated(changedProperties) {
		super.firstUpdated(changedProperties);
	}


	/**
	 * Element's DOM has been updated.
	 * (Peform work everytime attributes change)
	 * @param changedProperties {Map}
	 */
	updated(changedProperties) {
		super.updated(changedProperties);
	}
}

customElements.define('my-element', MyElement);