繁体 English 中英

第三方聚合物元件

[英]Third Party Polymer Elements

原文 2014-03-29 22:11:31 9 1 javascript/ iframe/ polymer/ shadow-dom

我试图了解聚合物是否是为特定用例构建的——第三方 Web 组件。

我需要完成的是创建一个 Web 组件，该组件将调用者页面的图像 url（元素的属性可以）作为输入，并在聚合物组件内部使用 HTML5 画布以特殊方式呈现图像。

对我来说，似乎聚合物目前不是为第三方使用而构建的。 原因：

必须对调用者的页面有足够的控制权才能将platform.js添加到<head> ，特别是<head>
我的platform.js版本可能与调用者页面的platform.js版本不同（或者至少我正在用聚合物的 JS 对象污染页面，对吗？）
在非 Chrome 浏览器中，样式和其他标签被注入到<head> ，可能与源页面冲突
如果想要设置选项以避免 FOUC，则必须控制调用者的<body>标签

传统上，我所有的 web 组件都是通过 iframe 构建的，我想对我的方法进行现代化改造，以实现“shadow-dom 的未来”。

有没有办法以第三方安全的方式使用聚合物？ 也许是与 [lightningjs 的混搭？

1 个解决方案

Polymer 和 Web Components 完全围绕 3rd 方使用构建，这是一个中心设计支柱。

IMO 最广泛的概念是，开发人员将能够访问网络并找到大量可供选择的 Web 组件。 这与能够从大量 JQuery 插件中进行选择没有什么不同，但具有更高程度的互操作性和组合，因为每个实例都可以被视为传统的元素。

平台.js

Platform.js 正在建模称为 Web 组件的未来浏览器功能。 现在使这项工作具有现实意义，所以是的，为了让第三方完全使用 Web 组件，他们需要选择加入platform.js （以及所有需要的）。 的确，这一事实使得（今天）很难在未经他们同意的情况下将 Web 组件注入到某人的页面中。

我的 platform.js 版本可能与调用者页面的版本不同

如上所述，需要预先使用platform.js才能使用 Web 组件。 这就是为什么它被命名为它的方式。 除非主页所有者包含此功能，否则他不会提供您可以向其提供 Web 组件的平台。

这与现代库（例如 JQuery）没有什么不同。 如果您不小心，您可以在一个文档中加载多个 JQuery 副本和/或版本，但这很浪费。 协调优先。

除了platform.js ，Web Components 围绕使用 M 个依赖项的 N 个模块进行调整，并且所有这些都以最佳方式协同工作。 这是另一种方式共享是设计的支柱。

在非chrome浏览器中注入了样式和其他标签，可能与源页面冲突

这就是 polyfilling 的所有代价。 如果您需要环境纯净，则必须等到 Web Components 本地广泛实现。 实际上，样式标签非常专业，不太可能与任何内容发生冲突。

如果想要设置避免 FOUC 的选项，则必须控制调用者的标签

严格来说这不是真的，您可以构建在一定程度上控制自己的 FOUC 的 Web 组件。 但这是很多额外的工作，作为第三方，你真的不知道某些开发人员将采用什么样的加载机制或习惯用法，因此在没有他的合作的情况下试图编排太多会很困难。

传统上，我所有的 Web 组件都是通过 iframe 构建的

IFRAME 与 Web Components 有很大不同。 IFRAME 是一个新的上下文，因此您有更多的安全网，但它是重量级的，并且存在协调成本。

尽管platform.js本质上正在改变共享平台，但自定义元素本身不需要与用户的全局命名空间或他的 CSS 混淆（尽管它们可以）。 代码可以限制在元素的原型中，CSS 和 DOM 可以隐藏在 ShadowDOM 中。 总体意图是这些都不需要从 Element 中泄漏出去，除非有人想要它。