javascript - 第三方 polymer 元件

标签 javascript iframe polymer shadow-dom

我试图了解 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 插件中进行选择没有什么不同,但具有更大程度的互操作性和组合性,因为每个实例都可以被视为传统的元素。

platform.js

Platform.js 正在对称为 Web 组件的 future 浏览器功能进行建模。 现在需要实现这项工作,所以,是的,为了让第三方使用 Web 组件,他们需要选择加入 platform.js (以及所有这一切)。确实,这一事实使得(今天)在未经某人同意的情况下将 Web 组件注入(inject)到某人的页面中变得很困难。

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 个模块进行设计,并且所有模块都能以最佳方式协同工作。这是共享成为设计支柱的另一种方式。

in non-chrome browsers style and other tags are injected into , possibly conflicting with the source page

这就是聚填充的全部代价。如果您需要环境的纯净度,则必须等到 Web 组件在本地得到广泛实现。实际上,样式标签非常专业,不太可能与任何内容发生冲突。

one must have control over the caller's tag if wanting to set options to avoid FOUC

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

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/

相关文章:

html - 使用 ssl 将 html 放入站点但无法使用 ssl 链接到它?

html - polymer 谷歌地图元素不显示

javascript - Polymer.dom(元素).innerHTML 不工作

javascript - 使用 lodash 的特定对象属性值

javascript - mandrill合并标签不接受变量值

javascript - 使用 jQuery 和 CSS3 旋转构建轮盘赌

javascript - 在 iFrame 的父窗口中打开一个 div

javascript - 另一个网站/跨域上的元素的Xpath

javascript - 是否可以将 Polymer 3 组件拆分为单独的 JavaScript、HTML 和 CSS 文件?

javascript - (无框架 - 纯 JS)使用 JS 对从 API 中提取的表进行分页