dr-niels-app-localize-behavior

This is a Polymer 3 conversion of the app-localize-behavior element from Collaborne (https://github.com/PolymerElements/app-localize-behavior) with some minor adjustments. The readme was not updated and is still the one from the original app-localize-behavior element! Nowadays, the original element was already updated to Polymer 3, so it's probably better to use the original element and not this one.

Polymer.AppLocalizeBehavior

Polymer.AppLocalizeBehavior wraps the format.js library to help you internationalize your application. Note that if you're on a browser that does not natively support the Intl object, you must load the polyfill yourself. An example polyfill can be found here.

Polymer.AppLocalizeBehavior supports the same message-syntax of format.js, in its entirety; use the library docs as reference for the available message formats and options.

Sample application loading resources from an external file:

<dom-module id="x-app">
   <template>
    <div>{{localize('hello', 'name', 'Batman')}}</div>
   </template>
   <script>
      Polymer({
        is: "x-app",

        behaviors: [
          Polymer.AppLocalizeBehavior
        ],

        properties: {
          language: {
            value: 'en'
          },
        }

        attached: function() {
          this.loadResources(this.resolveUrl('locales.json'));
        },
      });
   &lt;/script>
</dom-module>

Alternatively, you can also inline your resources inside the app itself:

<dom-module id="x-app">
   <template>
    <div>{{localize('hello', 'name', 'Batman')}}</div>
   </template>
   <script>
      Polymer({
        is: "x-app",

        behaviors: [
          Polymer.AppLocalizeBehavior
        ],

        properties: {
          language: {
            value: 'en'
          },
          resources: {
            value: function() {
              return {
                'en': { 'hello': 'My name is {name}.' },
                'fr': { 'hello': 'Je m\'apelle {name}.' }
              }
          }
        }
      });
   &lt;/script>
</dom-module>