javascript - Webcomponents polymer 元素不可见

Question

我正在尝试在我的项目中使用 PolymerElements，已导入所有库，但屏幕上没有任何内容(在 DOM 树的控制台中，所有元素都就位，因此它们目前不可见) .

你能告诉我我做错了什么吗？

这是我的代码

这里是所有导入

<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="/bower_components/app-layout/app-layout.html">
<link rel="import" href="/bower_components/app-layout/app-drawer/app-drawer.html">
<link rel="import" href="/bower_components/app-layout/app-drawer-layout/app-drawer-layout.html">
<link rel="import" href="/bower_components/app-layout/app-header/app-header.html">
<link rel="import" href="/bower_components/app-layout/app-header-layout/app-header-layout.html">

<link rel="import" href="/bower_components/app-toolbar/app-toolbar.html">
<link rel="import" href="/bower_components/paper-menu/paper-menu.html">
<link rel="import" href="/bower_components/paper-item/paper-icon-item.html">
<link rel="import" href="/bower_components/iron-pages/iron-pages.html">
<link rel="import" href="/bower_components/paper-tabs/paper-tabs.html">
<link rel="import" href="/bower_components/paper-tabs/paper-tab.html">
<link rel="import" href="/bower_components/paper-tabs/paper-tabs-icons.html">
<link rel="import" href="/bower_components/paper-icon-button/paper-icon-button.html">

带有 HTML 的 DOM 模块

<dom-module id="main-component">
  <template>
    <style>

    </style>

    <app-drawer-layout>
      <app-drawer>
        <app-toolbar>
        </app-toolbar>

        <paper-menu>
          <paper-icon-item></paper-icon-item>
        </paper-menu>
      </app-drawer>

      <app-header-layout>
        <app-header>
          <app-toolbar>
            <paper-tabs>
              <paper-tab>My first tab!</paper-tab>
            </paper-tabs>
          </app-toolbar>
        </app-header>

        <iron-pages>
          <div>One</div>
          <div>Two</div>
          <div>Three</div>
        </iron-pages>
      </app-header-layout>
    </app-drawer-layout>

  </template>

还有脚本

  <script>

    class MainComponent extends Polymer.Element {
      static get is() { return 'main-component'; }
      static get properties() {
        return {
          prop1: {
            type: String,
            value: 'main-component'
          }
        };
      }

      ready() {
        super.ready();
      }
    }

    window.customElements.define(MainComponent.is, MainComponent);
  </script>
</dom-module>

Answer 1

看来您正在使用 deprecated paper-menu 。不确定您的构建是否会发生这种情况，但根据 readme它会迫使您使用不理解基于类的语法的 Polymer 1.x。

尝试使用新的 polymer 入门套件开始新的工作并升级到 paper-listbox 。我用你的代码做到了这一点，并在屏幕上显示了你的 tab 元素(不过我必须修复你的路径)。