diff --git a/CONTRIBUTAING.md b/CONTRIBUTING.md
similarity index 100%
rename from CONTRIBUTAING.md
rename to CONTRIBUTING.md
diff --git a/bower.json b/bower.json
index c6b80e0..c421e22 100755
--- a/bower.json
+++ b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "paper-tags-input",
-  "version": "1.2.5",
+  "version": "2.0.0",
   "authors": [
     "Tianxiang Zhang <cenhiangapply@gmail.com>"
   ],
@@ -20,12 +20,13 @@
     "/demo/"
   ],
   "dependencies": {
-    "polymer": "Polymer/polymer#^1.0.0",
-    "paper-input": "PolymerElements/paper-input#^1.0.5",
-    "paper-icon-button": "PolymerElements/paper-icon-button#^1.1.4"
+    "polymer": "Polymer/polymer#^2.0.0",
+    "paper-input": "PolymerElements/paper-input#^2.0.0",
+    "paper-icon-button": "PolymerElements/paper-icon-button#^2.0.0"
   },
   "devDependencies": {
-    "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
-    "web-component-tester": "*"
+    "iron-component-page": "PolymerElements/iron-component-page#^2.0.0",
+    "web-component-tester": "^6.0.0",
+    "webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0"
   }
 }
diff --git a/demo/demo.html b/demo/demo.html
new file mode 100644
index 0000000..b35e57d
--- /dev/null
+++ b/demo/demo.html
@@ -0,0 +1,119 @@
+<dom-module id="tags-input-demo">
+  <template>
+    <div class="container">
+      <p>An example of <code>&lt;paper-tags-input&gt;</code>:</p>
+      <div class="container">
+        <code>
+          &lt;paper-tags-input tags=&quot;{{testtags}}&quot; placeholder=&quot;Please enter a test tag for this&quot; empty-error-message=&quot;Oops. Tag could not be empty&quot; label=&quot;Demo label&quot; &gt;&lt;/paper-tags-input&gt;  
+        </code>
+      </div>
+      <paper-tags-input tags="{{testtags}}" 
+                        placeholder="Please enter a test tag for this" empty-error-message="Oops. Tag could not be empty" label="Demo label" >
+      </paper-tags-input>
+    </div>
+
+    <div class="container">
+      <p>A example of <code>&lt;paper-tags-input&gt;</code> that only supports remove tags but not add tags:</p>
+      <div class="container">
+        <code>
+          &lt;paper-tags-input enable-add=&quot;{{enableAdd}}&quot; tags=&quot;{{testtags}}&quot; placeholder=&quot;Please enter a test tag for this&quot; empty-error-message=&quot;Oops. Tag could not be empty&quot; label=&quot;Remove only&quot; &gt; &lt;/paper-tags-input&gt;    
+        </code>
+      </div>
+
+      <paper-tags-input enable-add="{{enableAdd}}" tags="{{testtags}}" 
+                                                   placeholder="Please enter a test tag for this" empty-error-message="Oops. Tag could not be empty" label="Remove only" >
+      </paper-tags-input>
+    </div>
+
+
+    <div class="container">
+      <p>A example of <code>&lt;paper-tags-input&gt;</code> that only supports remove tags but not add tags:</p>
+      <div class="container">
+        <code>
+          &lt;paper-tags-input enable-remove=&quot;{{enableRemove}}&quot; tags=&quot;{{testtags}}&quot; placeholder=&quot;Please enter a test tag for this&quot; empty-error-message=&quot;Oops. Tag could not be empty&quot; label=&quot;Read only&quot; &gt; &lt;/paper-tags-input&gt;    
+        </code>
+      </div>
+      <paper-tags-input enable-remove="{{enableRemove}}" tags="{{testtags}}" 
+                                                         placeholder="Please enter a test tag for this" empty-error-message="Oops. Tag could not be empty" label="Read only" >
+      </paper-tags-input>
+    </div>
+
+    <div class="container">
+      <p>A example of <code>&lt;paper-tags-input&gt;</code> use medium and small size of tags:</p>
+      <div class="container">
+        <code>
+          &lt;paper-tags-input size=&quot;medium&quot; tags=&quot;{{testtags}}&quot; placeholder=&quot;Please enter a test tag for this&quot; empty-error-message=&quot;Oops. Tag could not be empty&quot; label=&quot;Medium&quot; &gt; &lt;/paper-tags-input&gt;    
+        </code>
+      </div>
+      <paper-tags-input size="medium" tags="{{testtags}}" 
+                                      placeholder="Please enter a test tag for this" empty-error-message="Oops. Tag could not be empty" label="Medium" >
+      </paper-tags-input>
+        <div class="container">
+          <code>
+            &lt;paper-tags-input size=&quot;medium&quot; enable-remove=&quot;{{enableRemove}}&quot; tags=&quot;{{testtags}}&quot; placeholder=&quot;Please enter a test tag for this&quot; empty-error-message=&quot;Oops. Tag could not be empty&quot; label=&quot;Medium&quot; &gt; &lt;/paper-tags-input&gt;     
+          </code>
+        </div>
+        <paper-tags-input size="medium" enable-remove="{{enableRemove}}" tags="{{testtags}}" 
+                                                                         placeholder="Please enter a test tag for this" empty-error-message="Oops. Tag could not be empty" label="Medium" >
+        </paper-tags-input>
+          <div class="container">
+            <code>
+              &lt;paper-tags-input size=&quot;small&quot; tags=&quot;{{testtags}}&quot; placeholder=&quot;Please enter a test tag for this&quot; empty-error-message=&quot;Oops. Tag could not be empty&quot; label=&quot;Small&quot; &gt; &lt;/paper-tags-input&gt;    
+            </code>
+          </div>
+          <paper-tags-input size="small" tags="{{testtags}}" 
+                                         placeholder="Please enter a test tag for this" empty-error-message="Oops. Tag could not be empty" label="Small" >
+          </paper-tags-input>
+            <div class="container">
+              <code>
+                &lt;paper-tags-input size=&quot;small&quot; enable-remove=&quot;{{enableRemove}}&quot; tags=&quot;{{testtags}}&quot; placeholder=&quot;Please enter a test tag for this&quot; empty-error-message=&quot;Oops. Tag could not be empty&quot; label=&quot;Small&quot; &gt; &lt;/paper-tags-input&gt;    
+              </code>
+            </div>
+            <paper-tags-input size="small" enable-remove="{{enableRemove}}" tags="{{testtags}}" 
+                                                                            placeholder="Please enter a test tag for this" empty-error-message="Oops. Tag could not be empty" label="Small" >
+            </paper-tags-input>
+    </div>
+
+
+    <div class="container">
+      <p>A example of <code>&lt;paper-tags-input&gt;</code> use custom tag color and font color of tags:</p>
+      <div class="container">
+        <code>
+          &lt;paper-tags-input tags=&quot;{{testtags}}&quot; placeholder=&quot;Please enter a test tag for this&quot; tag-color=&quot;red&quot; font-color=&quot;#ffffff&quot; empty-error-message=&quot;Oops. Tag could not be empty&quot; label=&quot;Custom color&quot; &gt; &lt;/paper-tags-input&gt;    
+        </code>
+      </div>
+      <paper-tags-input tags="{{testtags}}" 
+                        placeholder="Please enter a test tag for this" tag-color="red" font-color="#ffffff" empty-error-message="Oops. Tag could not be empty" label="Custom color" >
+      </paper-tags-input>
+    </div>
+
+    <div class="container">
+      <p>A example of <code>&lt;paper-tags-input&gt;</code> that has unicode language tags:</p>
+      <div class="container">
+        <code>
+          &lt;paper-tags-input tags=&quot;{{unicodes}}&quot; placeholder=&quot;Please enter a test tag for this&quot; label=&quot;Unicode tags&quot; &gt; 
+        </code>
+      </div>
+      <paper-tags-input tags="{{unicodes}}" 
+                        placeholder="Please enter a test tag for this" label="Unicode tags" >
+      </paper-tags-input>
+    </div>
+  </template>
+  <script>
+Polymer({
+  is: 'tags-input-demo',
+  properties: {
+  enableAdd: Boolean,
+  enableRemove: Boolean,
+  testTags: {
+  type: Array,
+  value: ['QianBenLulu', 'Taeyeon','Jessica','Tiffany','Sunny','Yuri','Hyeoyeon','Seohyun','Sooyoung','Yoona']
+},
+  unicodes: {
+  type: Array,
+  value: ['千本露露', '소녀시대','こまる','君のことがすきです','Mesut Özil','السلام عليكم','สวัสดี','Товарищи, здравствуйте!']
+}
+}
+});
+  </script>
+</dom-module>
diff --git a/demo/index.html b/demo/index.html
index 9f18a36..0b84593 100755
--- a/demo/index.html
+++ b/demo/index.html
@@ -1,12 +1,12 @@
 <!doctype html>
 <!--
-@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
+  @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
 -->
 <html>
   <head>
@@ -15,129 +15,14 @@
     <title>paper-tags-input Demo</title>
     <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
     <link rel="import" href="../paper-tags-input.html">
-    <link rel="import" href="../../paper-material/paper-material.html">
-    
+    <link rel="import" href="./demo.html">
   </head>
   <style>
-  .container{
-    padding:20px;
-  }
+.container{
+  padding:20px;
+}
   </style>
-  <body >
-    <template is="dom-bind" id="app">
-    <paper-material class="container">
-    <p>An example of <code>&lt;paper-tags-input&gt;</code>:</p>
-    <paper-material class="container">
-    <code>
-    &lt;paper-tags-input tags=&quot;{{testtags}}&quot; placeholder=&quot;Please enter a test tag for this&quot; empty-error-message=&quot;Oops. Tag could not be empty&quot; label=&quot;Demo label&quot; &gt;&lt;/paper-tags-input&gt;  
-    </code>
-    </paper-material>
-    <paper-tags-input tags="{{testtags}}" 
-    placeholder="Please enter a test tag for this" empty-error-message="Oops. Tag could not be empty" label="Demo label" >
-    </paper-tags-input>
-    </paper-material>
-
-    <paper-material class="container">
-    <p>A example of <code>&lt;paper-tags-input&gt;</code> that only supports remove tags but not add tags:</p>
-    <paper-material class="container">
-    <code>
-    &lt;paper-tags-input enable-add=&quot;{{enable_add}}&quot; tags=&quot;{{testtags}}&quot; placeholder=&quot;Please enter a test tag for this&quot; empty-error-message=&quot;Oops. Tag could not be empty&quot; label=&quot;Remove only&quot; &gt; &lt;/paper-tags-input&gt;    
-    </code>
-    </paper-material>
-
-    <paper-tags-input enable-add="{{enable_add}}" tags="{{testtags}}" 
-    placeholder="Please enter a test tag for this" empty-error-message="Oops. Tag could not be empty" label="Remove only" >
-    </paper-tags-input>
-    </paper-material>
-
-
-    <paper-material class="container">
-    <p>A example of <code>&lt;paper-tags-input&gt;</code> that only supports remove tags but not add tags:</p>
-    <paper-material class="container">
-    <code>
-    &lt;paper-tags-input enable-remove=&quot;{{enable_remove}}&quot; tags=&quot;{{testtags}}&quot; placeholder=&quot;Please enter a test tag for this&quot; empty-error-message=&quot;Oops. Tag could not be empty&quot; label=&quot;Read only&quot; &gt; &lt;/paper-tags-input&gt;    
-    </code>
-    </paper-material>
-    <paper-tags-input enable-remove="{{enable_remove}}" tags="{{testtags}}" 
-    placeholder="Please enter a test tag for this" empty-error-message="Oops. Tag could not be empty" label="Read only" >
-    </paper-tags-input>
-    </paper-material>
-
-    <paper-material class="container">
-    <p>A example of <code>&lt;paper-tags-input&gt;</code> use medium and small size of tags:</p>
-    <paper-material class="container">
-    <code>
-    &lt;paper-tags-input size=&quot;medium&quot; tags=&quot;{{testtags}}&quot; placeholder=&quot;Please enter a test tag for this&quot; empty-error-message=&quot;Oops. Tag could not be empty&quot; label=&quot;Medium&quot; &gt; &lt;/paper-tags-input&gt;    
-    </code>
-    </paper-material>
-    <paper-tags-input size="medium" tags="{{testtags}}" 
-    placeholder="Please enter a test tag for this" empty-error-message="Oops. Tag could not be empty" label="Medium" >
-    </paper-tags-input>
-    <paper-material class="container">
-    <code>
-    &lt;paper-tags-input size=&quot;medium&quot; enable-remove=&quot;{{enable_remove}}&quot; tags=&quot;{{testtags}}&quot; placeholder=&quot;Please enter a test tag for this&quot; empty-error-message=&quot;Oops. Tag could not be empty&quot; label=&quot;Medium&quot; &gt; &lt;/paper-tags-input&gt;     
-    </code>
-    </paper-material>
-    <paper-tags-input size="medium" enable-remove="{{enable_remove}}" tags="{{testtags}}" 
-    placeholder="Please enter a test tag for this" empty-error-message="Oops. Tag could not be empty" label="Medium" >
-    </paper-tags-input>
-    <paper-material class="container">
-    <code>
-    &lt;paper-tags-input size=&quot;small&quot; tags=&quot;{{testtags}}&quot; placeholder=&quot;Please enter a test tag for this&quot; empty-error-message=&quot;Oops. Tag could not be empty&quot; label=&quot;Small&quot; &gt; &lt;/paper-tags-input&gt;    
-    </code>
-    </paper-material>
-    <paper-tags-input size="small" tags="{{testtags}}" 
-    placeholder="Please enter a test tag for this" empty-error-message="Oops. Tag could not be empty" label="Small" >
-    </paper-tags-input>
-    <paper-material class="container">
-    <code>
-    &lt;paper-tags-input size=&quot;small&quot; enable-remove=&quot;{{enable_remove}}&quot; tags=&quot;{{testtags}}&quot; placeholder=&quot;Please enter a test tag for this&quot; empty-error-message=&quot;Oops. Tag could not be empty&quot; label=&quot;Small&quot; &gt; &lt;/paper-tags-input&gt;    
-    </code>
-    </paper-material>
-    <paper-tags-input size="small" enable-remove="{{enable_remove}}" tags="{{testtags}}" 
-    placeholder="Please enter a test tag for this" empty-error-message="Oops. Tag could not be empty" label="Small" >
-    </paper-tags-input>
-    </paper-material>
-
-
-    <paper-material class="container">
-    <p>A example of <code>&lt;paper-tags-input&gt;</code> use custom tag color and font color of tags:</p>
-    <paper-material class="container">
-    <code>
-    &lt;paper-tags-input tags=&quot;{{testtags}}&quot; placeholder=&quot;Please enter a test tag for this&quot; tag-color=&quot;red&quot; font-color=&quot;#ffffff&quot; empty-error-message=&quot;Oops. Tag could not be empty&quot; label=&quot;Custom color&quot; &gt; &lt;/paper-tags-input&gt;    
-    </code>
-    </paper-material>
-    <paper-tags-input tags="{{testtags}}" 
-    placeholder="Please enter a test tag for this" tag-color="red" font-color="#ffffff" empty-error-message="Oops. Tag could not be empty" label="Custom color" >
-    </paper-tags-input>
-    </paper-material>
-    </paper-material>
-
-    <paper-material class="container">
-    <p>A example of <code>&lt;paper-tags-input&gt;</code> that has unicode language tags:</p>
-    <paper-material class="container">
-    <code>
-    &lt;paper-tags-input tags=&quot;{{unicodes}}&quot; placeholder=&quot;Please enter a test tag for this&quot; label=&quot;Unicode tags&quot; &gt; 
-    </code>
-    </paper-material>
-    <paper-tags-input tags="{{unicodes}}" 
-    placeholder="Please enter a test tag for this" label="Unicode tags" >
-    </paper-tags-input>
-    </paper-material>
-    </paper-material>
-
-    
-
-    <script>
-        window.addEventListener('WebComponentsReady', function() {
-        var app = document.querySelector('#app');
-        app.enable_add = false;
-        app.enable_remove = false;
-        app.testtags = ['QianBenLulu', 'Taeyeon','Jessica','Tiffany','Sunny','Yuri','Hyeoyeon','Seohyun','Sooyoung','Yoona']
-        app.unicodes = ['千本露露', '소녀시대','こまる','君のことがすきです','Mesut Özil','السلام عليكم','สวัสดี','Товарищи, здравствуйте!']
-      });
-    </script>
-
-    </template>
+  <body>
+    <tags-input-demo></tags-input-demo>
   </body>
 </html>
diff --git a/paper-tags-input.html b/paper-tags-input.html
index ceae5b2..1eeac88 100755
--- a/paper-tags-input.html
+++ b/paper-tags-input.html
@@ -56,34 +56,37 @@
     bower install --save paper-tags-input
 
 
-@demo
+    `paper-tags-input`
+     @customElement
+     @polymer
+     @demo demo/index.html
 -->
 <dom-module id="paper-tags-input">
-  <style>
-    :host {
-      display: block;
-      box-sizing: border-box;
-      font-family: 'Roboto', 'Noto', sans-serif;
-    }
+  <template>
+    <style>
+:host {
+  display: block;
+  box-sizing: border-box;
+  font-family: 'Roboto', 'Noto', sans-serif;
+}
     .clearfix:after {
-     content: " ";
-     display: block;
-     height: 0;
-     clear: both;
+      content: " ";
+      display: block;
+      height: 0;
+      clear: both;
     }
-  </style>
+    </style>
 
-  <template>
-  <h3>{{label}}</h3>
+    <h3>{{label}}</h3>
     <div class="clearfix" >
-    <template is="dom-repeat" items="{{tags}}">
-      <tag-item font-color="{{fontColor}}" tag-color="{{tagColor}}" size="{{size}}" enable-remove="{{enableRemove}}" index="{{index}}" value="{{item}}"></tag-item>
-      </div>
-    </template>
+      <template is="dom-repeat" items="{{tags}}">
+        <tag-item font-color="{{fontColor}}" tag-color="{{tagColor}}" size="{{size}}" enable-remove="{{enableRemove}}" index="{{index}}" value="{{item}}"></tag-item>
     </div>
-     <template is="dom-if" if="{{enableAdd}}">
-       <paper-input on-focusout="_focusOut" error-message="{{emptyErrorMessage}}" label="{{placeholder}}" on-keydown="_keyDown" value="{{input_value}}"></paper-input>
-     </template>
+      </template>
+      </div>
+      <template is="dom-if" if="{{enableAdd}}">
+        <paper-input on-focusout="_focusOut" error-message="{{emptyErrorMessage}}" label="{{placeholder}}" on-keydown="_keyDown" value="{{input_value}}"></paper-input>
+      </template>
 
   </template>
 
@@ -103,7 +106,7 @@ <h3>{{label}}</h3>
       tags:{
         type:Array,
         notify: true,
-        value:function(){return []},
+        value: [],
       },
       /**
       * the CSS color for the tag, e.g. #e5e5e5
diff --git a/tag-item.html b/tag-item.html
index 1e2a163..a90c1c7 100644
--- a/tag-item.html
+++ b/tag-item.html
@@ -22,12 +22,13 @@
 -->
 <dom-module id="tag-item">
 
-  <style>
-    :host {
-      display: block;
-      box-sizing: border-box;
-      font-family: 'Roboto', 'Noto', sans-serif;
-    }
+  <template>
+    <style>
+:host {
+  display: block;
+  box-sizing: border-box;
+  font-family: 'Roboto', 'Noto', sans-serif;
+}
     .tag-value{
       display: inline-block;
       vertical-align: middle;
@@ -55,50 +56,48 @@
       font-size:18px;
     }
     .large paper-icon-button{
-        height: 40px;
-        width: 40px;
+      height: 40px;
+      width: 40px;
     }
     .large paper-icon-button::shadow #icon{
-        width: 22px;
-        height: 22px;
+      width: 22px;
+      height: 22px;
     }
 
     .medium paper-icon-button{
-        height: 34px;
-        width: 34px;
+      height: 34px;
+      width: 34px;
     }
     .medium{
       font-size:14px;
     }
     .medium paper-icon-button::shadow #icon{
-        width: 18px;
-        height: 18px;
+      width: 18px;
+      height: 18px;
     }
     .small paper-icon-button{
-        height: 30px;
-        width: 30px;
+      height: 30px;
+      width: 30px;
     }
     .small{
       font-size:12px;
     }
     .small paper-icon-button::shadow #icon{
-        width: 14px;
-        height: 14px;
+      width: 14px;
+      height: 14px;
     }
 
 
-  </style>
-
-  <template>
-      <div style$="{{_containerColor(tagColor, fontColor)}}" class$="{{_containerClass(size)}}">
-        <span class="tag-value">{{value}}</span>
-        <template is="dom-if" if="{{enableRemove}}">
-          <paper-icon-button on-tap="_removeItem" icon="icons:cancel"></paper-icon-button>
-        </template>
-        <template is="dom-if" if="{{!enableRemove}}">
-          <paper-icon-button style="width:0px;visibility:hidden;" on-tap="remove" icon="icons:cancel"></paper-icon-button>
-        </template>
-      </div>
+    </style>
+    <div style$="{{_containerColor(tagColor, fontColor)}}" class$="{{_containerClass(size)}}">
+      <span class="tag-value">{{value}}</span>
+      <template is="dom-if" if="{{enableRemove}}">
+        <paper-icon-button on-tap="_removeItem" icon="icons:cancel"></paper-icon-button>
+      </template>
+      <template is="dom-if" if="{{!enableRemove}}">
+        <paper-icon-button style="width:0px;visibility:hidden;" on-tap="remove" icon="icons:cancel"></paper-icon-button>
+      </template>
+    </div>
   </template>
 
 </dom-module>