在一个 HTML 文件中内联使用聚合物构建的 Web 组件答案

【问题标题】：Inlining web components built with polymer inside one HTML file在一个 HTML 文件中内联使用聚合物构建的 Web 组件
【发布时间】：2015-08-13 11:42:24
【问题描述】：

我有以下使用 Polymer 构建的 Web 组件：

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

<script>
    // register a new element
    Polymer({
        is: "proto-element",
        ready: function () {
            console.log("proto-element is going live...");
            this.innerHTML = "I'm a proto-element. Check out my prototype!";
        }
    });
</script>

我在以下 HTML 页面中使用它：

<!DOCTYPE html>
<html>
    <head>
        <script src="../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
        <link rel="import" href="proto-element.html"></link>
    </head>
    <body>
        <div style="background-color: red; height: 50px;">
            Hey
        </div>

        <proto-element></proto-element>

        <div style="background-color: red; height: 50px;">
            Hey
        </div>

        <proto-element></proto-element>
    </body>
</html>

您可以找到此示例here。

我想要做的是将所有内容捆绑到 index.html 文件中，包括我对 Web 组件的每个链接导入。最后， index.html 文件应该是独立的。在这种情况下可以做到吗？

【问题讨论】：

将聚合物导入和脚本在 index.html 中注册元素
@user1795832 我也想内联组件。

标签： javascript html polymer bundling-and-minification web-component

【解决方案1】：

似乎可以使用Vulcanize 内联Web 组件。安装 vulcanize 后，运行以下命令就可以了（下面的输出内容带有 > 是 Windows 特定的）：

vulcanize index.html > build.html

【讨论】：