Question

我尝试使用聚合物/凉亭/网络组件创建一个简单的网页，我是从here下载的。这是我的HTML：

<head>
  <script src="../bower-components/webcomponentsjs/webcomponents.js"></script>
  <!-- <link rel="stylesheet" type="text/script" href="script.js"> -->
  <link rel="import" 
  href="../bower-components/core-component-page/core-component-page.html">
  <link rel="stylesheet" type="text/css" href="main.css">
</head>

<body>
  <core-scaffold>
    <core-header-panel>
      <core-toolbar id="navheader">
        <span>Menu</span>
      </core-toolbar>
      <core-menu>
        <core-item label="One"></core-item>
        <core-item label="Two"></core-item>
      </core-menu>

    </core-header-panel>
    <span tool>Title</span>

  <div class="content">
      If drawer is hidden, press button to display drawer.
  </div>

  </core-scaffold>
</body>

main.css看起来像：

body {
  font-family: sans-serif;
}
#navheader {
  background-color: #56BA89;
}
.content {
  padding: 20px;
}

我用python简单服务器托管这个。

我确信进口产品“正在发挥作用”。（因为服务器正在为所有导入返回200），所以我不这么认为。但网页看起来像这样：

my webpage with broken elements

这个工具包看起来很简单，我只是捏了here的代码，我无法理解它为什么不起作用。我是Chrome版本39.0.2171.65。

Answer 1

您需要导入每个元素才能使用它。

<link rel="import" href="core-scaffold.html">

查看https://www.polymer-project.org/components/core-scaffold/demo.html的来源，了解更多详细信息和示例或本教程https://www.polymer-project.org/docs/start/tutorial/step-1.html

Answer 2

我也相信它是bower_components，但这是在我的Mac上：

我建议您为计划使用的所有核心组件使用不同的文本文件。

聚合物核心元素不适合我

2 个答案: