Question

我在官方聚合物网站上关注了入门教程：

https://www.polymer-project.org/docs/start/creatingelements.html

我试图测试网络组件和聚合物，但我无法获得基本模板。我无法在屏幕上呈现任何内容。我缺少什么想法？

我5000％的所有文件都正确链接了。我没有在日志中看到任何错误。我正在使用github repo的Polymer 0.8预览版。我使用的是最新版本的Chrome（38.0.2125.122）。我正在使用MAMP，因此HTML导入将起作用。我甚至包括web组件polyfill以防万一。我无法在任何地方找到一篇暗示我做错事的文章。这一切看起来都很简单。

自定义元素：

<link rel="import" href="polymer/polymer.html">

<polymer-element name="app-list" noscript>
  <template>
    <ul>
      <li>Hello World!</li>
      <li>Hello World!</li>
      <li>Hello World!</li>
    </ul>
    <content></content>
  </template>
</polymer-element>

指数：

<!DOCTYPE html>
<html lang="en-us">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width" initial-scale="1">
    <script src="webcomponentsjs/webcomponents.js"></script>
    <link rel="import" href="app-list.html">
  </head>

  <body>
    <div class="page">
      <app-list></app-list>

      <!-- etc... -->

Answer 1

在基于Chromium-38的node-webkit测试设置中，您的代码可以正常使用。但是，如果我尝试在Chrome中运行相同的代码（使用app-list的本地文件），则由于CORS异常而导致HTML导入失败，并且屏幕上没有显示任何内容。我建议您打开Chrome开发工具并验证app-list元素是否已注册，并在其阴影DOM中包含您的模板：

  <body>
    <div class="page">
      <app-list>
        #shadow-root
          <ul>
            <li>Hello World!</li>
            <li>Hello World!</li>
            <li>Hello World!</li>
          </ul>
          <content></content>
      </app-list>

（这是您应该在dev-tools的“元素”选项卡中重新创建的内容）。

祝你好运。

Answer 2

我无法从主分支或0.8预览分支中使GitHub版本正常工作。我从凉亭安装它，它工作正常。

使用聚合物工作获取自定义元素的问

2 个答案: