Question

我创建了一个基于Polymer 2.0的自定义Web组件，旨在安装在第三方网站上，以显示从我的网站管理的内容。

有问题的网络组件取决于其他3个自定义网络组件，还取决于 iron-ajax ，铁下拉，铁图标 ， iron-icon-svg ，标记元素和纸张图标按钮。

为了最大限度地提高浏览器兼容性，我们使用 polymer-build 和默认的 es5-bundled 预设将代码转换为ES5。

完成后，构建文件夹部署在Firebase托管上，我得到一个URL，用于在第三方网站上包含所需文件：

<script>if (!window.customElements) {
        document.write('<!--');
    }</script>
    <script type="text/javascript" src="https://cdn.mydomain.com/libs/webcomponentsjs/custom-elements-es5-adapter.js"></script>
    <!--! do not remove -->
    <script src="https://cdn.mydomain.com/libs/webcomponentsjs/webcomponents-loader.js"></script>
    <link rel="import" href="https://cdn.mydomain.com/components/my-component.html">

当我在空白页面中添加上一段代码时，我可以毫无问题地创建 my-component 的新实例，并且所有内容都按预期工作。

但是，当我将上面的代码包含在已经使用Polymer的网页中时，我会收到很多类似于以下内容的错误：

未捕获的DOMException：无法执行'define' 'CustomElementRegistry'：此名称已经与此一起使用注册表

这是可以理解的，因为导入上面嵌入了聚合物，但聚合物已经加载到页面上。

我正在考虑从我的自定义Web组件定义中排除Polymer和依赖项，例如 iron-ajax 等。这样，我可以直接在已嵌入Polymer的页面上使用Web组件，而不使用Polymer导入Polymer和所需依赖项的页面。

不幸的是，当我尝试过时，我无法生成通常由 polymer-build 自动创建的babel助手。此外，即使我成功获得了babel助手，那么这个解决方案并不总是有效，因为必须将所有相关代码转换为ES5。这意味着使用ES6版本的Polymer的第三方网页仍然无法使用我的自定义Web组件......

此时我唯一可以解决的问题是在私有存储库中发布我的自定义Web组件，并将源代码分发给需要在已嵌入Polymer的第三方网页中包含我的自定义Web组件的开发人员。这样，他们可以在本地导入组件定义并将其包含在构建中。不幸的是，该解决方案的主要缺点是阻止了我方的透明更新。我需要通知开发人员有关更改的信息，或者他们需要轮询更改：（

您是否已经遇到过聚合物的这种情况？你有什么建议吗？

从远程URL导入Polymer Web组件

0 个答案: