Webcomponents Polymer 元素不可见答案

【问题标题】：Webcomponents Polymer elements are not visibleWebcomponents Polymer 元素不可见
【发布时间】：2018-01-27 12:57:47
【问题描述】：

我正在尝试在我的项目中使用 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>

【问题讨论】：

bower_components 元素位于何处？ ../../bower_components 或 ./bower_components 根据您的元素上方。因为 polymer-element.html 和其他接缝位于不同的路径。

标签： javascript polymer polymer-2.x

【解决方案1】：

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

尝试使用新的 Polymer Starter Kit 重新开始，然后升级到 paper-listbox。我用你的代码做到了这一点，并在屏幕上显示了你的 tab 元素（不过我必须修复你的路径）。

【讨论】：