簡體 English 中英

第三方聚合物元件

[英]Third Party Polymer Elements

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

我試圖了解聚合物是否是為特定用例構建的——第三方 Web 組件。

我需要完成的是創建一個 Web 組件，該組件將調用者頁面的圖像 url（元素的屬性可以）作為輸入，並在聚合物組件內部使用 HTML5 畫布以特殊方式呈現圖像。

對我來說，似乎聚合物目前不是為第三方使用而構建的。 原因：

必須對調用者的頁面有足夠的控制權才能將platform.js添加到<head> ，特別是<head>
我的platform.js版本可能與調用者頁面的platform.js版本不同（或者至少我正在用聚合物的 JS 對象污染頁面，對嗎？）
在非 Chrome 瀏覽器中，樣式和其他標簽被注入到<head> ，可能與源頁面沖突
如果想要設置選項以避免 FOUC，則必須控制調用者的<body>標簽

傳統上，我所有的 web 組件都是通過 iframe 構建的，我想對我的方法進行現代化改造，以實現“shadow-dom 的未來”。

有沒有辦法以第三方安全的方式使用聚合物？ 也許是與 [lightningjs 的混搭？

1 個解決方案

Polymer 和 Web Components 完全圍繞 3rd 方使用構建，這是一個中心設計支柱。

IMO 最廣泛的概念是，開發人員將能夠訪問網絡並找到大量可供選擇的 Web 組件。 這與能夠從大量 JQuery 插件中進行選擇沒有什么不同，但具有更高程度的互操作性和組合，因為每個實例都可以被視為傳統的元素。

平台.js

Platform.js 正在建模稱為 Web 組件的未來瀏覽器功能。 現在使這項工作具有現實意義，所以是的，為了讓第三方完全使用 Web 組件，他們需要選擇加入platform.js （以及所有需要的）。 的確，這一事實使得（今天）很難在未經他們同意的情況下將 Web 組件注入到某人的頁面中。

我的 platform.js 版本可能與調用者頁面的版本不同

如上所述，需要預先使用platform.js才能使用 Web 組件。 這就是為什么它被命名為它的方式。 除非主頁所有者包含此功能，否則他不會提供您可以向其提供 Web 組件的平台。

這與現代庫（例如 JQuery）沒有什么不同。 如果您不小心，您可以在一個文檔中加載多個 JQuery 副本和/或版本，但這很浪費。 協調優先。

除了platform.js ，Web Components 圍繞使用 M 個依賴項的 N 個模塊進行調整，並且所有這些都以最佳方式協同工作。 這是另一種方式共享是設計的支柱。

在非chrome瀏覽器中注入了樣式和其他標簽，可能與源頁面沖突

這就是 polyfilling 的所有代價。 如果您需要環境純凈，則必須等到 Web Components 本地廣泛實現。 實際上，樣式標簽非常專業，不太可能與任何內容發生沖突。

如果想要設置避免 FOUC 的選項，則必須控制調用者的標簽

嚴格來說這不是真的，您可以構建在一定程度上控制自己的 FOUC 的 Web 組件。 但這是很多額外的工作，作為第三方，你真的不知道某些開發人員將采用什么樣的加載機制或習慣用法，因此在沒有他的合作的情況下試圖編排太多會很困難。

傳統上，我所有的 Web 組件都是通過 iframe 構建的

IFRAME 與 Web Components 有很大不同。 IFRAME 是一個新的上下文，因此您有更多的安全網，但它是重量級的，並且存在協調成本。

盡管platform.js本質上正在改變共享平台，但自定義元素本身不需要與用戶的全局命名空間或他的 CSS 混淆（盡管它們可以）。 代碼可以限制在元素的原型中，CSS 和 DOM 可以隱藏在 ShadowDOM 中。 總體意圖是這些都不需要從 Element 中泄漏出去，除非有人想要它。