🌍 Localized Mixin

Internationalization Support for Web Components

← Back to Demo Page

About Localized Mixin

This mixin provides internationalization (i18n) support for web components. It integrates with the arslib Localization system to automatically translate text content based on the specified language. Perfect for creating multi-language applications.

🌐 Language Selector

Choose a language to see the localized components update:

📝 Localized Components

These components automatically update their text based on the selected language:

Welcome Component

[[localization.welcome]]
[[localization.description]]

Form Component

📋 Translation Reference

Reference table showing all available translations:

Key English Español Français Deutsch Português 日本語
welcome Welcome to our application! ¡Bienvenido a nuestra aplicación! Bienvenue dans notre application ! Willkommen in unserer Anwendung! Bem-vindo ao nosso aplicativo! アプリケーションへようこそ！
description This is a localized component demo Este es un demo de componente localizado Ceci est une démo de composant localisé Dies ist eine Demo einer lokalisierten Komponente Este é um demo de componente localizado これはローカライズされたコンポーネントのデモです
name Name Nombre Nom Name Nome 名前
email Email Correo electrónico Email E-Mail Email メール
submit Submit Enviar Soumettre Absenden Enviar 送信

📖 Implementation Guide

How to Use the Localized Mixin:

1. Use the mixin element: <localized-mixin>content</localized-mixin>

2. Use [[localization.key]] syntax in your HTML content

3. Set the locale attribute: locale="en"

// Using the localized-mixin element <localized-mixin locale="en"> <div> <h2>[[localization.welcome]]</h2> <p>[[localization.description]]</p> <button>[[localization.submit]]</button> </div> </localized-mixin>
// Adding translations programmatically const mixin = document.querySelector('localized-mixin'); mixin.addTranslations('en', { welcome: 'Custom Welcome', description: 'Custom Description' });

✨ Features

What the Localized Mixin Provides:

  • Declarative Element: Use <localized-mixin> for easy localization
  • Multi-language Support: Easy switching between languages
  • Template Syntax: Use [[localization.key]] in HTML
  • Automatic Updates: Content updates when language changes
  • Custom Translations: Add or override translations programmatically
  • Fallback Support: Graceful fallback to base locale and English
  • Parameter Interpolation: Support for dynamic values in translations

🔤 Simple Attribute-based Localization

Demo: The element below is localized using <localized-mixin> and the data-localize-map convention.
Change the language above to see the title and button label update!

How it works:

  • The <simple-localized-element> component declares which attributes it wants localized and which translation keys to use via data-localize-map.
  • The <localized-mixin> detects this and sets the appropriate attributes based on the current language.
  • This pattern is generic and works for any component that follows the convention.
<localized-mixin locale="en">
  <simple-localized-element
    data-localize-map='{"title":"simple.title","button-label":"simple.button"}'></simple-localized-element>
</localized-mixin>

🔤 Attribute-based Localization (Simple Example)

Demo: The element below is localized using <localized-mixin> and the data-localize-map convention.
Change the language above to see the title and button label update!

How it works:

  • The <simple-localized-element> component declares which attributes it wants localized and which translation keys to use via data-localize-map.
  • The <localized-mixin> detects this and sets the appropriate attributes based on the current language.
  • This pattern is generic and works for any component that follows the convention.
<localized-mixin locale="en">
  <simple-localized-element
    data-localize-map='{"title":"simple.title","button-label":"simple.button"}'></simple-localized-element>
</localized-mixin>

🗂️ Per-mixin (Instance) Translations

Demo: The element below uses a translations attribute on <localized-mixin> to provide a custom translation table, independent of the global one.
Use the language selector below to change only this instance!

How it works:

  • The translations attribute provides a translation table just for this mixin instance.
  • The language selector above only affects this instance, not the others on the page.
  • This is useful for widgets, micro-frontends, or testing with custom translations.
<!-- Language selector for this instance -->
<select onchange="document.getElementById('custom-mixin').setLocale(this.value)">
  <option value="en">English</option>
  <option value="es">Español</option>
</select>
<localized-mixin
  locale="en"
  translations='{"en":{"simple":{"title":"Custom Title!","button":"Custom Button"}},
    "es":{"simple":{"title":"¡Título Personalizado!","button":"Botón Personalizado"}}}'
>
  <simple-localized-element
    data-localize-map='{"title":"simple.title","button-label":"simple.button"}'></simple-localized-element>
</localized-mixin>