创建Polymer 3 App-添加一些元素

Question

我正在尝试按照Polymer website提供的教程来启动和运行Polymer 3应用程序。我现在正尝试将Add Some Elements“复选框”放到应用程序中，并已仔细按照说明进行操作，但它不起作用！我还引用了webcomponents.org上的paper-checkbox元素进行验证。

我已npm install @polymer/paper-checkbox@next --save到我的根文件夹my-app。我在下面提供了我的代码，任何人都可以告诉我是否发生了更改或者我做错了什么？

my-new-view.js

/* Load the PolymerElement base class and html helper function */
import {PolymerElement} from '@polymer/polymer/polymer-element.js';
import {html} from '@polymer/polymer/lib/utils/html-tag.js';

/* Load shared styles. All view elements use these styles */
import '@polymer/paper-checkbox/paper-checkbox.js';

import './shared-styles.js';


/* Extend the base PolymerElement class */
class MyNewView extends PolymerElement {
    /* Define a template for the new element */
    static get template() {
        return html`
          <paper-checkbox>Unchecked</paper-checkbox>
          <paper-checkbox checked>Checked</paper-checkbox>
          <paper-checkbox disabled>Disabled</paper-checkbox>
       `;
    }
}

/* Register the new element with the browser */
customElements.define('my-new-view', MyNewView);

my-app.js

<!-- Drawer content -->
        <app-drawer id="drawer" slot="drawer" swipe-open="[[narrow]]">
          <app-toolbar>Menu</app-toolbar>
          <iron-selector selected="[[page]]" attr-for-selected="name" class="drawer-list" role="navigation">
            <a name="view1" href="[[rootPath]]view1">View One</a>
            <a name="view2" href="[[rootPath]]view2">View Two</a>
            <a name="view3" href="[[rootPath]]view3">View Three</a>
            <a name="new-view" href="[[rootPath]]new-view">New View</a>
          </iron-selector>

<iron-pages selected="[[page]]" attr-for-selected="name" role="main">
            <my-view1 name="view1"></my-view1>
            <my-view2 name="view2"></my-view2>
            <my-view3 name="view3"></my-view3>
            <my-new-view name="new-view"></my-new-view>
            <my-view404 name="view404"></my-view404>
          </iron-pages>

_routePageChanged(page) {
     // Show the corresponding page according to the route.
     //
     // If no page was found in the route data, page will be an empty string.
     // Show 'view1' in that case. And if the page doesn't exist, show 'view404'.
    if (!page) {
      this.page = 'view1';
    } else if (['view1', 'view2', 'view3', 'new-view'].indexOf(page) !== -1) {
      this.page = page;
    } else {
      this.page = 'view404';
    }

    // Close a non-persistent drawer when the page & route are changed.
    if (!this.$.drawer.persistent) {
      this.$.drawer.close();
    }
  }

  _pageChanged(page) {
    // Import the page component on demand.
    //
    // Note: `polymer build` doesn't like string concatenation in the import
    // statement, so break it up.
    switch (page) {
      case 'view1':
        import('./my-view1.js');
        break;
      case 'view2':
        import('./my-view2.js');
        break;
      case 'view3':
        import('./my-view3.js');
        break;
        case 'new-view':
          import('./my-new-view.js');
          break;
      case 'view404':
        import('./my-view404.js');
        break;
    }
  }
}