Polymer 2.0

  <!-- Polyfill 为老旧浏览器提供的 Web 组件支持 -->
  <script src="components/webcomponentsjs/webcomponents-lite.min.js"></script>

  <!-- 导入元素 -->
  <link rel="import" href="components/google-map/google-map.html">

  <!-- 使用元素 -->
  <google-map latitude="37.790" longitude="-122.390"></google-map>
          

  <dom-module id="contact-card">
    <template>
      <style>/* ... */</style>
      <slot></slot>
      <iron-icon icon="star" hidden$="{{!starred}}"></iron-icon>
    </template>
    <script>
      class ContactCard extends Polymer.Element {
        static get is() { return "contact-card"; }
        static get properties() {
          return {
            starred: { type: Boolean, value: false }
          }
        }
      }
      customElements.define(ContactCard.is, ContactCard);
    </script>
  </dom-module>
            

  <contact-card starred>
    <img src="profile.jpg" alt="Eric's photo">
    <span>Eric Bidelman</span>
  </contact-card>
            

  <iron-pages role="main" selected="[[page]]" attr-for-selected="name" selected-attribute="visible">
    <!-- 主页视图 -->
    <shop-home name="home" categories="[[categories]]"></shop-home>

    <!-- 目录中商品的列表视图 -->
    <shop-list name="list" route="[[subroute]]" offline="[[offline]]"></shop-list>

    <!-- 商品详情视图 -->
    <shop-detail name="detail" route="[[subroute]]" offline="[[offline]]"></shop-detail>

    <!-- 购物车视图 -->
    <shop-cart name="cart" cart="[[cart]]" total="[[total]]"></shop-cart>

    <!-- 结帐视图 -->
    <shop-checkout name="checkout" cart="[[cart]]" total="[[total]]" route="{{subroute}}"></shop-checkout>
  </iron-pages>