Polymer Parent/Child Element ES6 Webstorm File Template

polymer-parent-child-es6.html

<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/paper-material/paper-material.html">
<link rel="import" href="../../bower_components/paper-behaviors/paper-button-behavior.html">

#set($ITEM = $NAME + '-item')
#set($ItemElement = $Element + 'Item')

<dom-module id="${NAME}">
  <template strip-whitespace>
    <style include="paper-material">
      :root {
      }
  
      :host {
        display: inline-block;
        box-sizing: border-box;
                
        @apply(--${NAME}-content)
      }
    </style>
    <content select="${ITEM}"></content>
  </template>
  <!--suppress JSMethodCanBeStatic -->
  <script type='text/ecmascript-6'>
    (function () {
  
      class ${Element}#[[$END$]]# {
        get is() {
          return '${NAME}';
        }
  
        //noinspection JSUnusedGlobalSymbols
        get behaviors() {
          return this._behaviors || (this._behaviors = [Polymer.PaperButtonBehavior]);
        }
  
        //noinspection JSUnusedGlobalSymbols
        set behaviors(value) {
          this._behaviors = value;
        }
  
        //noinspection JSUnusedGlobalSymbols
        get properties() {
          return {
            name: {
              computed: '_getName()',
              notify: false,
              observer: '_nameChanged',
              readOnly: false,
              reflectToAttribute: false,
              type: String, //Boolean, Date, Number, String, Array or Object
              value: ''
            }
          }
        }
  
        //noinspection JSUnusedGlobalSymbols
        attached() {
          console.log('${NAME} attached');
        }
  
        //noinspection JSUnusedGlobalSymbols
        created() {
          console.log('${NAME} created');
        }
  
        //noinspection JSUnusedGlobalSymbols
        detached() {
          console.log('${NAME} detached');
        }
  
        //noinspection JSUnusedGlobalSymbols
        ready() {
          console.log('${NAME} ready');
        }
  
        //noinspection JSUnusedGlobalSymbols
        _getName (...args) {
          console.log(`${NAME} get name [${args.length}] \${args}`);
        }
  
        _nameChanged (...args) {
          console.log(`${NAME} name changed [${args.length}] \${args}`);
        }
      }
  
      Polymer(${Element}); 
    }).call();
  </script>
</dom-module>

<dom-module id="${ITEM}">
  <template strip-whitespace>
    <style include="paper-material">
      :root {
      }
  
      :host {
        display: inline-block;
        box-sizing: border-box;
                
        @apply(--${ITEM}-content)
      }
    </style>
    <span>{{name}}</span>
  </template>
  <!--suppress JSMethodCanBeStatic -->
  <script type='text/ecmascript-6'>
    (function () {
  
      class ${ItemElement}#[[$END$]]# {
        get is() {
          return '${ITEM}';
        }
  
        //noinspection JSUnusedGlobalSymbols
        get properties() {
          return {
            name: {
              computed: '_getName()',
              notify: false,
              observer: '_nameChanged',
              readOnly: false,
              reflectToAttribute: false,
              type: String, //Boolean, Date, Number, String, Array or Object
              value: ''
            }
          }
        }
  
        //noinspection JSUnusedGlobalSymbols
        attached() {
          console.log('${ITEM} attached');
        }
  
        //noinspection JSUnusedGlobalSymbols
        created() {
          console.log('${ITEM} created');
        }
  
        //noinspection JSUnusedGlobalSymbols
        detached() {
          console.log('${ITEM} detached');
        }
  
        //noinspection JSUnusedGlobalSymbols
        ready() {
          console.log('${ITEM} ready');
        }
  
        //noinspection JSUnusedGlobalSymbols
        _getName (...args) {
          console.log(`${ITEM} get name [${args.length}] \${args}`);
        }
  
        _nameChanged (...args) {
          console.log(`${ITEM} name changed [${args.length}] \${args}`);
        }
      }
  
      Polymer(${ItemElement}); 
    }).call();
  </script>
</dom-module>