第三方聚合物元素

时间:2014-03-29 22:11:31

标签: javascript iframe polymer shadow-dom

我试图了解聚合物是否针对特定用例 - 第三方Web组件构建。

我需要完成的是创建一个Web组件,它从调用者页面输入一个图像URL(元素上的属性可以),在聚合物组件内部,它使用HTML5画布以特殊方式呈现图像。 / p>

对我而言,聚合物目前似乎不是为第三方使用而构建的。原因:

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

传统上我的所有网络组件都是通过iframe构建的,我希望通过“阴影未来”来实现我的方法现代化。

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

1 个答案:

答案 0 :(得分:2)

Polymer和Web Components完全围绕第三方使用,这是一个核心设计支柱。

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

  
    

platform.js

  

Platform.js正在为称为Web Components的未来浏览器功能建模。现在正在进行这项工作有实际的现实,所以是的,为了让第三方完全使用Web Components,他们需要选择加入platform.js(和这一切都需要)。确实,这个事实使得(如今)将Web组件注入某人的页面而未经他们的同意是很困难的。

  
    

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

不同   

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

这与现代图书馆没有什么不同,例如JQuery的。如果您不小心,可以在一个文档中加载大量的JQuery副本和/或版本,但这样做很浪费。协调是首选。

除了platform.js之外,Web Components面向使用M依赖关系的N个模块,并且所有模块都以最佳方式协同工作。这是另一种分享方式是设计的支柱。

  
    

在非Chrome浏览器样式和其他标签注入,可能与源页面冲突

  

这是polyfilling的所有价格。如果您需要纯净的环境,则必须等到Web Components被广泛实现。实际上,样式标签非常专业,不太可能与任何东西冲突。

  
    如果想要设置选项以避免FOUC

,则必须控制调用者的标记   

这并非严格意义上说,您可以构建控制自己的FOUC的Web组件。但这是一项额外的工作,而且作为第三方,你真的不知道一些开发人员会采用什么样的加载机制或习惯用法,所以如果没有他的合作就过多地进行编排会很困难。

  
    

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

  

IFRAME与Web Components完全不同。 IFRAME是一个新的背景,所以你有更多的安全网,但它是重量级的,并且有协调成本。

虽然platform.js本质上正在改变共享平台,但自定义元素本身不需要弄乱用户的全局命名空间或他的CSS(尽管他们可以)。代码可以限制在元素的原型中,CSS和DOM可以存储在ShadowDOM中。总体意图是,除非有人想要,否则这些都不需要泄漏元素。