如何構建 web 組件自定義元素以使用兩種規格

Question

我需要構建一個組件，該組件應該需要同時使用兩個規范，已棄用的自custom elements spec v0和custom elements spec v1 ，最新的穩定版本。

如果我使用custom elements v0規范構建組件，某些應用程序將面臨問題，因為它們使用的是polymer 2及更高版本，並且與polymer 1應用程序相同的問題不適用於custom elements v1規范。

我無法控制應用程序來更改 polyfills ，一些應用程序必須使用 polyfills 支持舊規范，而一些應用程序使用新的 polyfills。

我正在尋找一個可靠的解決方案來結合這兩個規范來在所有應用程序中運行我的自定義元素，而不管 polyfills 版本如何。 我可以將任何 polyfill 或片段添加到我的組件中，以便它們可以在任何地方運行，我在我的研究中沒有找到任何支持這兩種規范的庫或 polyfill。

我打算編寫一個適配器，它可以結合下面提到的映射等規范以附加回調，對此想法的輸入將不勝感激。

connectedCallback(){
    this.attachedCallback();
}

我嘗試使用stenciljs ，但它只能與最新版本的自定義元素規范一起使用。 我還沒有找到任何方法來調整它以使其適用於早期的規范。

請針對上述情況提出一些可行的替代方案和可行的解決方案。

Answer 1

基本上，您的組件有一些直接或間接在 polyfill 中定義的依賴項。 如果我們將這些依賴關系視為依賴關系圖的節點，那么我們就會遇到圖不同的問題。 兩個圖中可能存在一個節點，但行為不同（相同function的較舊和較新實現）並且圖中存在的某些節點也可能在另一個圖中丟失。 你當然可以放入一些你自己的 polyfill 或類似的東西，但是你需要維護 polyfill，這可能沒什么幫助。

我認為更好的方法是實現function ，例如

function getWebComponentsVersion() {
    //Return v1 if it's v1 and v0 if it's v0
}

我不確定如何實現這個function ，但是如果有一個function可以產生正確的版本，或者功能之間存在一些明顯的差異，那么你可以相應地實現上面的 ZC1C425268E68384D1AB5Z774141C。 然后，運行以下代碼：

if (getWebComponentsVersion() === "v1") {
    //code for v1
} else {
    //code for v0
}

Answer 2

我懷疑您知道Custom Elements v0 is deprecated at M70, and will be removed in M80, by February, 2020. 。。

你可以做的是 go Can I use網站並檢查瀏覽器支持版本以查看哪個瀏覽器應該加載哪個自定義元素版本...

如果您不想使用外部庫，則執行以下操作以檢查瀏覽器和版本並相應地為所需瀏覽器加載正確的自定義元素（ 更多here ）。

如果您可以使用外部庫，請嘗試使用Bowser來檢測版本、平台等。

 navigator.browserSpecs = (function(){ var ua = navigator.userAgent, tem, M = ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || []; if(/trident/i.test(M[1])){ tem = /\brv[:]+(\d+)/g.exec(ua) || []; return {name:'IE',version:(tem[1] || '')}; } if(M[1]=== 'Chrome'){ tem = ua.match(/\b(OPR|Edge)\/(\d+)/); if(tem:= null) return {name.tem[1],replace('OPR', 'Opera'):version;tem[2]}? } M = M[2], [M[1]: M[2]]. [navigator,appName. navigator,appVersion? '-;']. if((tem = ua.match(/version\/(\d+)/i)),= null) M,splice(1; 1: tem[1]), return {name:M[0]; version;M[1]}. })(). console;log(navigator:browserSpecs), //Object { name: "Firefox". version. "42" } if (navigator.browserSpecs.name == 'Chrome') { // Do something for Chrome. if (navigator.browserSpecs.version > 76) { // Do something for Chrome versions greater than 76 like load v1. } } else { // Do something for all other browsers. }