Home Start Get started Quick tour of Polymer Install Polymer 2.x Build an element 1. Get set up 2. Add local DOM 3. Data binding & properties 4. React to input 5. Theming with custom properties Build an app 1. Get set up 2. Create a new page 3. Add some elements 4. Deploy Polymer Feature overview About this release What's new in 2.0 Upgrade guide Hybrid elements Release notes Custom elements Custom element concepts Define an element Declare properties Shadow DOM & styling Shadow DOM concepts DOM templating Style shadow DOM Custom CSS properties Events Handle and fire events Gesture events Data system Data system concepts Work with object and array data Observers and computed properties Data binding Helper elements Browser support Overview Polyfills ES6 Tools Tools overview Polymer CLI Document your elements Test your elements Web services polymer.json specification Node support Resources Glossary API Reference API Reference Global settings App Toolbox What's in the box? Using the Toolbox App templates Responsive app layout Routing Localization App storage Service worker Deploy Build for production Serve your app The PRPL pattern Case study Shop News Blog Community What's in the box?
Using the Toolbox
App templates Responsive app layout Routing Localization App storage Service worker
Deploy
Build for production Serve your app The PRPL pattern
Case study
Shop News

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 a polyfill yourself. An example polyfill can be found at github.com/andyearnshaw/Intl.js.

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

Each element that displays content to be localized should add Polymer.AppLocalizeBehavior. All of these elements share a common localization cache, so you only need to load translations once.

AppLocalizeBehavior can be used directly in Polymer 1.x elements and Polymer 2.x hybrid elements. For class-style elements, use the mixinBehaviors method.

bower install --save PolymerElements/app-localize-behavior

The main application is usually responsible for loading the localized messages and setting the current language.

Sample application (class style elements)

<dom-module id="x-app">
  <template>
    <!-- use the localize method to localize text -->
    <div>{{localize('hello', 'name', 'Batman')}}</div>
  </template>
  <script>
    class XApp extends Polymer.mixinBehaviors([Polymer.AppLocalizeBehavior], Polymer.Element) {
      static get is() { return 'x-app'}

      static get properties() {
        return {
          // set the current language—shared across all elements in the app
          // that use AppLocalizeBehavior
          language: {
            value: 'en'
          },

          // Initialize locale data
          resources: {
            value() {
              return {
                'en': { 'hello': 'My name is {name}.' },
                'fr': { 'hello': 'Je m\'apelle {name}.' }
              }
            }
          }
        };
      }
    }

    customElements.define(XApp.is, XApp);
  </script>
</dom-module>

More typically, the app loads resources from an external file, as shown in the next example.

Sample application (hybrid elements)

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

        // include the behavior
        behaviors: [
          Polymer.AppLocalizeBehavior
        ],

        // set the current language—shared across all elements in the app
        // that use AppLocalizeBehavior
        properties: {
          language: {
            value: 'en'
          },
        }

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

The main app is also responsible for loading the Intl polyfill (not shown above).

Each element that needs to localize messages should also add the Polymer.AppLocalizeBehavior and use the localize method to translate strings, as shown above.