i18n-element

i18n-element

I18N Base Element for Polymer 2.x with i18n-behavior

Conceptual Workflow

from i18n-behavior.

Browser Compatibility

Polyfilled by webcomponents-lite.js

Browser	Chrome*	Firefox*	Edge 13+	IE 11	Safari 9+	Chrome Android*	Mobile Safari*	Opera*
Supported	✔	✔	✔	✔	✔	✔	✔	✔

ES5 transpilation is required for non-ES6-ready browsers.

Demo on GitHub Pages

Demo for ES6-ready browsers

Demo Source index.html

Install

bower install i18n-element

Import

<link rel="import" href="bower_components/i18n-element/i18n-element.html">

Syntax

Mixins.Localizable Class Expressions Mixin

• Extend Polymer.LegacyElementMixin(HTMLElement) for now

Demo Source

<dom-module id="localizable-element">
  <template>
    <span id="label1">Localizable UI label 1</span><br>
    <span id="label2">Localizable UI label 2</span><br>
    <span id="label3">Localizable UI label 3</span>
  </template>
</dom-module>
<script>
class LocalizableElement extends Mixins.Localizable(Polymer.LegacyElementMixin(HTMLElement)) {
  static get is() { return 'localizable-element'; }
}
customElements.define(LocalizableElement.is, LocalizableElement);
</script>

BaseElements.I18nElement I18N Base Element Class

• Equivalent to Mixins.Localizable(Polymer.LegacyElementMixin(HTMLElement))

Demo Source

<dom-module id="i18n-subclass-element">
  <template>
    <span id="label1">Subclass UI label 1</span><br>
    <span id="label2">Subclass UI label 2</span><br>
    <span id="label3">Subclass UI label 3</span>
  </template>
</dom-module>
<script>
class I18nSubclassElement extends BaseElements.I18nElement {
  static get is() { return 'i18n-subclass-element'; }
}
customElements.define(I18nSubclassElement.is, I18nSubclassElement);
</script>

Define = class Thin Definition Syntax derived from Thin Polymer for Polymer 1.x

Additional Import:

<link rel="import" href="bower_components/i18n-element/define-element.html">

• is static property is generated by un-camel-casing class name
• <template id="element-name"> is used instead of <dom-module id="element-name">
• customElements.define(ElementClass.is, ElementClass) is called
• Element class is registered as Define.ElementClass
• Applicable to both Class Expressions Mixin and I18N Base Element Class
• Applicable to non-I18N element classes as well
• Either template id or class name can be omitted if the template and the class are in a dedicated HTML without other custom element definitions
• gulp-i18n-preprocess 1.2.3 or later is required for vulcanized applications
• targetVersion: 2 option is required for gulp-i18n-preprocess

Demo Source

<template id="i18n-thin-element">
  <span id="label1">Thin UI label 1</span><br>
  <span id="label2">Thin UI label 2</span><br>
  <span id="label3">Thin UI label 3</span>
</template>
<script>
Define = class I18nThinElement extends BaseElements.I18nElement {
}
</script>

Polymer({ is, behaviors }) Legacy Syntax for Polymer 1.x Compatibility

Import:

<!-- DO NOT IMPORT i18n-element.html -->
<link rel="import" href="bower_components/i18n-behavior/i18n-behavior.html">

• Polymer 1.x Compatible Legacy Syntax
• Import i18n-behavior.html, and not i18n-element.html
• gulp-i18n-preprocess 1.2.3 or later is required for vulcanized applications
• targetVersion: 2 option is required for gulp-i18n-preprocess

Demo Source

<dom-module id="i18n-legacy-element">
  <template>
    <span id="label1">Legacy UI label 1</span><br>
    <span id="label2">Legacy UI label 2</span><br>
    <span id="label3">Legacy UI label 3</span>
  </template>
</dom-module>
<script>
Polymer({
  is: 'i18n-legacy-element',
  behaviors: [ BehaviorsStore.I18nBehavior ]
});
</script>

I18N-ready Bound Element i18n-dom-bind

Additional Import:

<link rel="import" href="bower_components/i18n-element/i18n-dom-bind.html">

• Based on dom-bind Element
• i18n-dom-bind element must have id attribute

Demo Source

<i18n-dom-bind id="el5">
  <template>
    <span id="label1">Bound UI label 1</span><br>
    <span id="label2">Bound UI label 2</span><br>
    <span id="label3">Bound UI label 3</span>
  </template>
</i18n-dom-bind>

Tests on GitHub Pages

Test Suites

Test Suites (*-test.html)	Description
basic	Basic functionalities
edge-case	Edge cases
multiple-case	Multiple element cases
template-default-lang	templateDefaultLang tests
preference	i18n-preference tests
no-persist	i18n-preference tests
define-element	Define = class tests

Test on Build Phases

Build Phases	UI Strings	L10N JSON	HTML	JavaScript
src2	Hard-coded	Modular	Modular	HTML Embedded
preprocess2	Extracted	Modular	Modular	HTML Embedded

License

BSD-2-Clause