简体繁体 English

第三方聚合物元件

[英]Third Party Polymer Elements

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

I'm trying to understand if polymer is built for a specific use-case-- third party web components.我试图了解聚合物是否是为特定用例构建的——第三方 Web 组件。

What I need to accomplish is create a web component that takes as input from the caller's page an image url (attributes on an element is ok) and inside the polymer component it renders the image in a special way using HTML5 canvas.我需要完成的是创建一个 Web 组件，该组件将调用者页面的图像 url（元素的属性可以）作为输入，并在聚合物组件内部使用 HTML5 画布以特殊方式呈现图像。

To me, it seems like polymer isn't currently built for third-party usage.对我来说，似乎聚合物目前不是为第三方使用而构建的。 Reasons why:原因：

one must have enough control over the caller's page to add platform.js to the <head> , specifically the <head>必须对调用者的页面有足够的控制权才能将platform.js添加到<head> ，特别是<head>
my version of platform.js could potentially be different than the caller page's platform.js (or bare minimum i'm polluting the page with polymer's JS objs, right?)我的platform.js版本可能与调用者页面的platform.js版本不同（或者至少我正在用聚合物的 JS 对象污染页面，对吗？）
in non-chrome browsers style and other tags are injected into <head> , possibly conflicting with the source page在非 Chrome 浏览器中，样式和其他标签被注入到<head> ，可能与源页面冲突
one must have control over the caller's <body> tag if wanting to set options to avoid FOUC如果想要设置选项以避免 FOUC，则必须控制调用者的<body>标签

Traditionally all my web components have been built via iframes and i'd like to modernize my approach with a view towards a "shadow-dom future."传统上，我所有的 web 组件都是通过 iframe 构建的，我想对我的方法进行现代化改造，以实现“shadow-dom 的未来”。

Is there a way to use polymer in a third-party safe way?有没有办法以第三方安全的方式使用聚合物？ Perhaps a mashup with [lightningjs?也许是与 [lightningjs 的混搭？

1 个解决方案

Polymer and Web Components are entirely structured around 3rd party usage, this is a central design pillar. Polymer 和 Web Components 完全围绕 3rd 方使用构建，这是一个中心设计支柱。

The broadest notion IMO is that developers will be able to go to the web and find numerous Web Components to choose from. IMO 最广泛的概念是，开发人员将能够访问网络并找到大量可供选择的 Web 组件。 This is not unlike being able to choose from an enormous set of JQuery plugins, but with a much greater degree of interoperability and composition because each instance can be treated as a traditional Element.这与能够从大量 JQuery 插件中进行选择没有什么不同，但具有更高程度的互操作性和组合，因为每个实例都可以被视为传统的元素。

platform.js平台.js

Platform.js is modeling future browser capabilities called Web Components. Platform.js 正在建模称为 Web 组件的未来浏览器功能。 There are practical realities of making this work right now , so yes, in order for a third party to use Web Components at all, they will need to opt-in in to platform.js (and all that entails).现在使这项工作具有现实意义，所以是的，为了让第三方完全使用 Web 组件，他们需要选择加入platform.js （以及所有需要的）。 It's true that this fact makes it's difficult (today) to inject Web Components into somebody's page without their assent.的确，这一事实使得（今天）很难在未经他们同意的情况下将 Web 组件注入到某人的页面中。

my version of platform.js could potentially be different than the caller page's我的 platform.js 版本可能与调用者页面的版本不同

As above, platform.js is required upfront to use Web Components.如上所述，需要预先使用platform.js才能使用 Web 组件。 This is why it's named the way it is.这就是为什么它被命名为它的方式。 Unless the main page owner includes this capability, he's not providing a platform to which you can supply Web Components.除非主页所有者包含此功能，否则他不会提供您可以向其提供 Web 组件的平台。

This is not dissimilar to modern libraries, eg JQuery.这与现代库（例如 JQuery）没有什么不同。 You can load numerous copies and/or versions of JQuery in one document if you aren't careful, but it's wasteful.如果您不小心，您可以在一个文档中加载多个 JQuery 副本和/或版本，但这很浪费。 Coordination is preferred.协调优先。

With the exception of platform.js , Web Components is geared around N modules using M dependencies, and that all working together optimally.除了platform.js ，Web Components 围绕使用 M 个依赖项的 N 个模块进行调整，并且所有这些都以最佳方式协同工作。 This is another way sharing is a pillar of the design.这是另一种方式共享是设计的支柱。

in non-chrome browsers style and other tags are injected into , possibly conflicting with the source page在非chrome浏览器中注入了样式和其他标签，可能与源页面冲突

This all the price of polyfilling.这就是 polyfilling 的所有代价。 If you need purity of environment, you will have to wait until Web Components are widely implemented natively.如果您需要环境纯净，则必须等到 Web Components 本地广泛实现。 As a practical matter, the style tags are very specialized and are unlikely to conflict with anything.实际上，样式标签非常专业，不太可能与任何内容发生冲突。

one must have control over the caller's tag if wanting to set options to avoid FOUC如果想要设置避免 FOUC 的选项，则必须控制调用者的标签

This is not strictly true, you can build Web Components that control their own FOUC up to a point.严格来说这不是真的，您可以构建在一定程度上控制自己的 FOUC 的 Web 组件。 But it's a lot of extra work, and as a third-party, you really can't know what kind of loading mechanisms or idioms some developer is going to employ, so trying to orchestrate too much without his cooperation is going to be difficult.但这是很多额外的工作，作为第三方，你真的不知道某些开发人员将采用什么样的加载机制或习惯用法，因此在没有他的合作的情况下试图编排太多会很困难。

Traditionally all my web components have been built via iframes传统上，我所有的 Web 组件都是通过 iframe 构建的

IFRAME is quite a bit different from Web Components. IFRAME 与 Web Components 有很大不同。 An IFRAME is a fresh context, and so you have a lot more safety net, but it's heavyweight and there are coordination costs. IFRAME 是一个新的上下文，因此您有更多的安全网，但它是重量级的，并且存在协调成本。

Although platform.js , by it's very nature, is changing the shared platform, Custom Elements themselves need not mess with the user's global namespace or his CSS (although they can).尽管platform.js本质上正在改变共享平台，但自定义元素本身不需要与用户的全局命名空间或他的 CSS 混淆（尽管它们可以）。 Code can be restricted to the element's prototype, and CSS and DOM can be stashed inside ShadowDOM.代码可以限制在元素的原型中，CSS 和 DOM 可以隐藏在 ShadowDOM 中。 The overall intent is that none of that need leak out of the Element, unless somebody wants it to.总体意图是这些都不需要从 Element 中泄漏出去，除非有人想要它。