我试图了解 polymer 是否是为特定用例(第三方网络组件)构建的。
我需要完成的是创建一个 Web 组件,该组件从调用者页面获取图像 url(元素上的属性可以)作为输入,并在 polymer 组件内部使用 HTML5 Canvas 以特殊方式呈现图像。
对我来说, polymer 目前似乎并不是为第三方使用而构建的。原因:
- 必须对调用者的页面有足够的控制权才能添加
platform.js
到<head>
,特别是<head>
- 我的版本
platform.js
可能与调用者页面的platform.js
不同(或者至少我用 polymer 的 JS 对象污染了页面,对吧?) - 在非 Chrome 浏览器中,样式和其他标签被注入(inject)
<head>
,可能与源页面冲突 - 必须能够控制调用者的
<body>
如果想要设置选项以避免 FOUC,请标记
传统上,我所有的 Web 组件都是通过 iframe 构建的,我希望以“shadow-dom 的 future ”为目标,对我的方法进行现代化改造。
有没有办法以第三方安全的方式使用 polymer ?也许是与 [lightningjs 的混搭?
最佳答案
Polymer 和 Web 组件完全围绕第 3 方使用构建,这是一个中心设计支柱。
IMO 最广泛的概念是开发人员将能够访问网络并找到众多可供选择的 Web 组件。这与能够从大量 JQuery 插件中进行选择没有什么不同,但具有更大程度的互操作性和组合性,因为每个实例都可以被视为传统的元素。
block 引用>platform.js
Platform.js 正在对称为 Web 组件的 future 浏览器功能进行建模。 现在需要实现这项工作,所以,是的,为了让第三方使用 Web 组件,他们需要选择加入
platform.js
(以及所有这一切)。确实,这一事实使得(今天)在未经某人同意的情况下将 Web 组件注入(inject)到某人的页面中变得很困难。block 引用>my version of platform.js could potentially be different than the caller page's
如上所述,
platform.js
需要预先使用 Web 组件。这就是它如此命名的原因。除非主页所有者包含此功能,否则他不会提供您可以提供 Web 组件的平台。这与现代图书馆没有什么不同,例如jQuery。如果您不小心,您可以在一个文档中加载 JQuery 的多个副本和/或版本,但这很浪费。协调优先。
除了
platform.js
,Web 组件围绕使用 M 个依赖项的 N 个模块进行设计,并且所有模块都能以最佳方式协同工作。这是共享成为设计支柱的另一种方式。block 引用>in non-chrome browsers style and other tags are injected into , possibly conflicting with the source page
这就是聚填充的全部代价。如果您需要环境的纯净度,则必须等到 Web 组件在本地得到广泛实现。实际上,样式标签非常专业,不太可能与任何内容发生冲突。
block 引用>one must have control over the caller's tag if wanting to set options to avoid FOUC
这并不完全正确,您可以构建在一定程度上控制自己的 FOUC 的 Web 组件。但这是很多额外的工作,而且作为第三方,你真的无法知道某些开发人员将采用什么样的加载机制或习惯用法,因此在没有他的配合的情况下尝试编排太多工作将会很困难。
block 引用>Traditionally all my web components have been built via iframes
IFRAME 与 Web 组件有很大不同。 IFRAME 是一个新的上下文,因此您有更多的安全网,但它是重量级的并且存在协调成本。
虽然
platform.js
从本质上来说,正在改变共享平台,自定义元素本身不需要弄乱用户的全局命名空间或他的 CSS(尽管它们可以)。代码可以限制为元素的原型(prototype),CSS 和 DOM 可以隐藏在 ShadowDOM 中。总体意图是,除非有人想要,否则这些都不需要从元素中泄漏。
关于javascript - 第三方 polymer 元件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22737561/