打包的 Web 应用程序中的 Web 组件

Question

我正在使用 Polymer 创建打包的 Web 应用程序，但它没有按应有的方式显示元素。

这是index.html

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
    <title>seed-element Demo</title>
    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
    <link rel="import" href="../seed-element.html">
  </head>
  <body>

    <p>An example of <code>&lt;seed-element&gt;</code>:</p>

    <button>Say Something</button>

    <seed-element author='{"name": "Lord Meowser", "image": "http://placekitten.com/g/200/300"}' fancy>
      <h2>Hello seed-element</h2>
    </seed-element>

  </body>
</html>

当我使用 polyserve 启动它时，它工作正常，但是当我将它与清单打包并在 FirefoxOS 模拟器上尝试时，该组件不工作。我必须在 manifest 中修改吗？

有人可以帮忙吗？我卡住了。

Answer 1

我找到了方法。这是一个 CSP inline-script 问题。首先，我需要 npm install Vulcanize 和 Crisper 将内联脚本拆分成一个文件，这样我就可以在我的内部使用 Polymer 网络组件打包的网络应用程序。

vulcanize index.html --inline-script | crisper --html build.html --js build.js

倒入法语 réponse 加上 complète。

打包的 Web 应用程序中的 Web 组件

Web component in packaged web app

firefox-os

polymer