2

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

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

对我来说,聚合物目前似乎不是为第三方使用而制造的。原因:

  • 必须对调用者的页面有足够的控制才能添加platform.js<head>,特别是<head>
  • 我的版本platform.js可能与调用者页面的版本不同platform.js(或者我用聚合物的 JS objs 污染了页面,对吧?)
  • 在非 chrome 浏览器中,样式和其他标签被注入<head>,可能与源页面冲突
  • <body>如果要设置选项以避免 FOUC,则必须控制调用者的标签

传统上,我所有的 Web 组件都是通过 iframe 构建的,我想对我的方法进行现代化改造,着眼于“shadow-dom 未来”。

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

4

1 回答 1

2

Polymer and Web Components are entirely structured around 3rd party usage, this is a central design pillar.

The broadest notion IMO is that developers will be able to go to the web and find numerous Web Components to choose from. 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.

platform.js

Platform.js is modeling future browser capabilities called Web Components. 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). It's true that this fact makes it's difficult (today) to inject Web Components into somebody's page without their assent.

my version of platform.js could potentially be different than the caller page's

As above, platform.js is required upfront to use Web Components. 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.

This is not dissimilar to modern libraries, e.g. JQuery. You can load numerous copies and/or versions of JQuery in one document if you aren't careful, but it's wasteful. 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. 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

This all the price of polyfilling. If you need purity of environment, you will have to wait until Web Components are widely implemented natively. 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

This is not strictly true, you can build Web Components that control their own FOUC up to a point. 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

IFRAME is quite a bit different from 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.

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). Code can be restricted to the element's prototype, and CSS and DOM can be stashed inside ShadowDOM. The overall intent is that none of that need leak out of the Element, unless somebody wants it to.

于 2014-03-29T23:20:10.133 回答