我正在尝试在我的项目中使用 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>
最佳答案
看来您正在使用 deprecated paper-menu
。
不确定您的构建是否会发生这种情况,但根据 readme它会迫使您使用不理解基于类的语法的 Polymer 1.x。
尝试使用新的 polymer 入门套件开始新的工作并升级到 paper-listbox
。
我用你的代码做到了这一点,并在屏幕上显示了你的 tab
元素(不过我必须修复你的路径)。
关于javascript - Webcomponents polymer 元素不可见,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48458852/