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 Starter Kit启动新功能并升级到paper-listbox。我用你的代码完成了这个并在屏幕上显示了tab元素（我必须修改你的路径）。

Web组件聚合物元素不可见

1 个答案: