Add elements helper

.travis.yml

@@ -2,20 +2,12 @@ language: node_js
 sudo: required
 before_script:
   - npm install -g polymer-cli
-  - polymer install --variants
-  - >-
-    npm run update-types && git diff --exit-code || (echo -e
-    '\n\033[31mERROR:\033[0m Typings are stale. Please run "npm run
-    update-types".' && false)
-  - >-
-    npm run format && git diff --exit-code || (echo -e '\n\033[31mERROR:\033[0m
-    Typings are stale. Please run "npm run format".' && false)
+  - 'npm run update-types && git diff --exit-code || (echo -e ''\n\033[31mERROR:\033[0m Typings are stale. Please run "npm run update-types".'' && false)'
+  - 'npm run format && git diff --exit-code || (echo -e ''\n\033[31mERROR:\033[0m Typings are stale. Please run "npm run format".'' && false)'
 env:
   global:
-    - secure: >-
-        JeSfmBNQGyT7fu9NURSHqK9miBYrieoVdCnzOIq1QRDpWEiUGJKrcWKbabA/1MrlYfbQDFwXIDGrv0hcZzf0xbDblo5s/jUnep1vq/w/IRznEDnhJelpjG6c38vlBbPQOZI3L32eu8w5BBmlXhc4XXpUGkIy94O1Iz7Tn3zkeFI/fKhMyrmgDUOuehP0EHyoKxLCyWGLV+aTRtif6TK/wn6ULwM+GvLiS7nykrnA2WoDEECAuCoIsfRD9UFoLH4dNmOoiEHGeSx3rL6aE0TV9GVpPpBkL6qe8LFJLV4GJsekVyeOnKlekbzts8joIrR62P9m2BHZMQkizyx6Tj22vF6uXI8HAvocNIbijiJPSKFRA2Ir6ZAtBKPFMv73upROSvzqT+8UjW4DM9EDQiheCZ+Hkv0cQqtSmmiS3GxrTxW622lKdg2uVbD2qH2Ac2wJNGztukKtAyR2wSyjD7R/wE2MiQrT2YlGw95aMMqVylF1CtXoUJWGXUdfT6NZ7WCjbRj3fwABBY6BT+bJioIolHORdY6QbFUJ8GASqHqYlZShd23JtM5LJeDyJrJ4oEWNJ7q+jYl5xN7zwy/W0H86bn+6JX/Lxq71kvkohpzAHwSWAuAANLYf7cIUZ7GBo1lUzWaSJ1SaW981jH9s87NnyBP2thJAnyr78T6UXjPFZYk=
-    - secure: >-
-        THJhGmuNJqLVeRfN2qJL1FKH3TXNwovC0z8G1GU4ML3pYbRL8oFw7nrtnofwgI99axLNEoJFZnkWcmkKRWlDHYX+LwQCUtYr3eW/pncrWGVBElr9HUgw6q0tY0o6v1Oe0Oj3kqxWuFkA1Kv8V7bHvB9ABT7CimwXDAC+uwP4SDqEtlVz8LAg6G74ywJaKg+S1gL8EHTIAGjeMSfKw4UjFAi6QKebJBsPOu8qmGrBSSdaLoDKhQb+kJqcLncJ0PB2AKC8zTzpxsDSwZizGDGLcbuFR1pnqTqISKgfpTVycTHJrEQwYsS6bTR7X86i3lcJ4H5dtI/HHaAQTmeT3JpvTfz5f9dvAuJVqimQOzdFlKM7ehhNk3j9KtED/vnQW9+0AJhOT9+7trokW++jl219QS29FOPYTxSo/XvI6iLZfOr4X0l4VhNkgHeE6EyCUoGNwDRxUvn+KcsQMk6JdHLY+lCckZ+tRFQIUjMPqjn9tB/MjBqtXxDhF5ZjaOcLufzuywKBzlMT4OkAiOGK9qFENKpTVaqvmRPPM1bjkZuzfTBJTOzWDznf2V4r65/s6ZRpoqEy0ozb7NjUEjYOR+OuZfKYVwT5VmAykKLNW3eQJc1zJjvhjghSIxOWH9AvD18UeQtEcv2J5pVFIp+BFVR25i0BH+efOwWJ49hk0o0N+Dw=
+    - secure: JeSfmBNQGyT7fu9NURSHqK9miBYrieoVdCnzOIq1QRDpWEiUGJKrcWKbabA/1MrlYfbQDFwXIDGrv0hcZzf0xbDblo5s/jUnep1vq/w/IRznEDnhJelpjG6c38vlBbPQOZI3L32eu8w5BBmlXhc4XXpUGkIy94O1Iz7Tn3zkeFI/fKhMyrmgDUOuehP0EHyoKxLCyWGLV+aTRtif6TK/wn6ULwM+GvLiS7nykrnA2WoDEECAuCoIsfRD9UFoLH4dNmOoiEHGeSx3rL6aE0TV9GVpPpBkL6qe8LFJLV4GJsekVyeOnKlekbzts8joIrR62P9m2BHZMQkizyx6Tj22vF6uXI8HAvocNIbijiJPSKFRA2Ir6ZAtBKPFMv73upROSvzqT+8UjW4DM9EDQiheCZ+Hkv0cQqtSmmiS3GxrTxW622lKdg2uVbD2qH2Ac2wJNGztukKtAyR2wSyjD7R/wE2MiQrT2YlGw95aMMqVylF1CtXoUJWGXUdfT6NZ7WCjbRj3fwABBY6BT+bJioIolHORdY6QbFUJ8GASqHqYlZShd23JtM5LJeDyJrJ4oEWNJ7q+jYl5xN7zwy/W0H86bn+6JX/Lxq71kvkohpzAHwSWAuAANLYf7cIUZ7GBo1lUzWaSJ1SaW981jH9s87NnyBP2thJAnyr78T6UXjPFZYk=
+    - secure: THJhGmuNJqLVeRfN2qJL1FKH3TXNwovC0z8G1GU4ML3pYbRL8oFw7nrtnofwgI99axLNEoJFZnkWcmkKRWlDHYX+LwQCUtYr3eW/pncrWGVBElr9HUgw6q0tY0o6v1Oe0Oj3kqxWuFkA1Kv8V7bHvB9ABT7CimwXDAC+uwP4SDqEtlVz8LAg6G74ywJaKg+S1gL8EHTIAGjeMSfKw4UjFAi6QKebJBsPOu8qmGrBSSdaLoDKhQb+kJqcLncJ0PB2AKC8zTzpxsDSwZizGDGLcbuFR1pnqTqISKgfpTVycTHJrEQwYsS6bTR7X86i3lcJ4H5dtI/HHaAQTmeT3JpvTfz5f9dvAuJVqimQOzdFlKM7ehhNk3j9KtED/vnQW9+0AJhOT9+7trokW++jl219QS29FOPYTxSo/XvI6iLZfOr4X0l4VhNkgHeE6EyCUoGNwDRxUvn+KcsQMk6JdHLY+lCckZ+tRFQIUjMPqjn9tB/MjBqtXxDhF5ZjaOcLufzuywKBzlMT4OkAiOGK9qFENKpTVaqvmRPPM1bjkZuzfTBJTOzWDznf2V4r65/s6ZRpoqEy0ozb7NjUEjYOR+OuZfKYVwT5VmAykKLNW3eQJc1zJjvhjghSIxOWH9AvD18UeQtEcv2J5pVFIp+BFVR25i0BH+efOwWJ49hk0o0N+Dw=
 node_js: stable
 addons:
   firefox: latest
@@ -26,8 +18,7 @@ addons:
       - google-chrome-stable
   sauce_connect: true
 script:
-  - xvfb-run polymer test
-  - >-
-    if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then polymer test -s 'default';
-    fi
+  - xvfb-run polymer test --module-resolution=node --npm
+  - 'if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then polymer test --module-resolution=node --npm -s ''default''; fi'
 dist: trusty
+

demo/cats-only.html → demo/cats-only.js

@@ -1,17 +1,19 @@
-<!--
+/**
 @license
 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
 Code distributed by Google as part of the polymer project is also
 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
--->
-<link rel="import" href="../../polymer/polymer.html">
-<link rel="import" href="../../iron-validatable-behavior/iron-validatable-behavior.html">
-
-<dom-module id="cats-only">
-  <template>
+*/
+import '@polymer/polymer/polymer-legacy.js';
+
+import { IronValidatableBehavior } from '@polymer/iron-validatable-behavior/iron-validatable-behavior.js';
+import { Polymer } from '@polymer/polymer/lib/legacy/polymer-fn.js';
+import { html } from '@polymer/polymer/lib/utils/html-tag.js';
+Polymer({
+  _template: html`
     <style>
       :host {
         display: inline-block;
@@ -24,32 +26,26 @@
       }
     </style>
     <input value="{{value}}" id="input" placeholder="Type 'cats' to prove you like cats">
-  </template>
-</dom-module>
-
-<script>
-  Polymer({
-    is: 'cats-only',
-
-    properties: {
-      value: {type: String},
+`,
 
-      name: {type: String}
-    },
+  is: 'cats-only',
 
-    behaviors: [Polymer.IronValidatableBehavior],
+  properties: {
+    value: {type: String},
 
-    listeners: {'input': '_onInput'},
+    name: {type: String}
+  },
 
-    _onInput: function() {
-      this.value = this.$.input.value;
-    },
+  behaviors: [IronValidatableBehavior],
+  listeners: {'input': '_onInput'},
 
-    // Overidden from Polymer.IronValidatableBehavior. Will set the `invalid`
-    // attribute automatically, which should be used for styling.
-    _getValidity: function() {
-      return this.value === 'cats';
-    }
+  _onInput: function() {
+    this.value = this.$.input.value;
+  },
 
-  });
-</script>
+  // Overidden from Polymer.IronValidatableBehavior. Will set the `invalid`
+  // attribute automatically, which should be used for styling.
+  _getValidity: function() {
+    return this.value === 'cats';
+  }
+});