[2.0] Support Polymer 2.0 with Custom Elements V1

[t2ym]

Support Polymer 2.0 in a dedicated branch

Major Design Changes:

• Use class expression mixin instead of a behavior since beforeRegister is no longer available
• Support inline template property via the class expression mixin

Needs Feasibility Check on the design:

• Q: Should MyElement class be extended?
• Q: Should I18nElement be defined, extending Polymer.Element?

Plan A: Inline Template before build-time i18n preprocess: Extending Polymer.Element
[Difficult to preprocess at build-time]

class MyElement extends I18nMixin(Polymer.Element) {
  static get is () { return 'my-element'; }
  // `I18nMixin.template` converts the inline template `rawTemplate`
  static get rawTemplate () { 
    let template = document.createElement('template');
    template.innerHTML =  `<span id="label">UI Text</span>`;
    return template;
  }
};
customElement.define(MyElement.is, MyElement);

Plan B: Inline Template before build-time i18n preprocess: Extending MyElement
[Difficult to preprocess at build-time]

class MyElement extends Polymer.Element {
  static get is () { return 'my-element'; }
  // `I18nMixin.template` converts the inline template `template`
  static get template () { 
    let template = document.createElement('template');
    template.innerHTML =  `<span id="label">UI Text</span>`;
    return template;
  }
};
customElement.define(MyElement.is, I18nMixin(MyElement));

Plan C: External Template before build-time i18n preprocess: Extending Polymer.Element

<template id="my-element">
  <span id="label">UI Text</span>
</template>
<script>
class MyElement extends I18nMixin(Polymer.Element) {
  static get is () { return 'my-element'; }
  // I18nMixin.template preprocesses `<template id="my-element">`
};
customElement.define(MyElement.is, MyElement);
</script>

Plan D: External Template before build-time i18n preprocess:

<dom-module id="my-element">
  <template>
    <span id="label">UI Text</span>
  </template>
</dom-module>
<script>
class MyElement extends I18nMixin(Polymer.Element) {
  static get is () { return 'my-element'; }
  // `I18nMixin.template` preprocesses `super.template`
};
customElement.define(MyElement.is, MyElement);
</script>

Plan E: External Template after build-time i18n preprocess:

<dom-module id="my-element">
  <template localizable-text="embedded">
    <span id="label">{{text.label}}</span>
    <template id="localizable-text"><json-data>{ "label": "UI Text" }</json-data></template>
  </template>
</dom-module>
<script>
class MyElement extends I18nMixin(Polymer.Element) {
  static get is () { return 'my-element'; }
  // `I18nMixin.template` returns `super.template` in Polymer.Element
};
customElement.define(MyElement.is, MyElement);
</script>

[t2ym]

Proof of Concept Demo is available at https://github.com/t2ym/i18n-element

[t2ym]

Implemented in 2.0.0