両方の仕様で機能するようにWebコンポーネントのカスタム要素を構築する方法

非推奨にcustom elements spec v0なった両方の仕様と最新の安定バージョンで動作する必要があるコンポーネントを構築する必要があります。custom elements spec v1

custom elements v0スペックを使用してコンポーネントをビルドすると、一部のアプリはスペックpolymer 2をpolymer 1使用していないアプリケーションで同様の問題が発生しますcustom elements v1。

私は、ポリフィルを変更するアプリケーションを制御できません。一部のアプリケーションは、ポリフィルを使用する必要があり、古い仕様をサポートしているものもあれば、新しいポリフィルを使用しているものもあります。

ポリフィルのバージョンに関係なく、両方の仕様を組み合わせてすべてのアプリケーションでカスタム要素を実行するための確実なソリューションを探しています。私はコンポーネントに任意のポリフィルまたはスニペットを追加して、どこでも実行できるようにすることができます。私の研究では、両方の仕様をサポートするライブラリやポリフィルは見つかりませんでした。

添付のコールバックについて、以下で説明するマッピングのような両方の仕様を組み合わせることができるアダプターを作成することを計画しています。この考えに関する入力は大歓迎です。

connectedCallback(){
    this.attachedCallback();
}

私はstenciljsを使用しようとしましたが、それはカスタム要素仕様の最新バージョンでのみ機能します。以前の仕様で動作するように調整する方法はまだ見つかりません。

上記の状況に対するいくつかの実行可能な代替案と実行可能な解決策を提案してください。

基本的に、コンポーネントにはいくつかの依存関係があり、それらはポリフィルで直接または間接的に定義されています。これらの依存関係を依存関係グラフのノードと考えると、グラフが異なるという問題があります。ノードが両方のグラフに存在するが、動作が異なる（同じの古いものと新しい実装function）可能性があり、グラフに存在する一部のノードが別のノードで欠落している可能性もあります。もちろん、独自のポリフィルなどを挿入することもできますが、ポリフィルを維持する必要があるため、あまり役に立たない場合があります。

私の意見でより良いアプローチは、実装することであるfunctionように、

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

私は確かにこれを実装する方法はないんだfunctionが、どちらかがあればfunction適切なバージョンを得ている、または機能の間にいくつかの明白な違いは、それに応じ上記の機能を実装することができます。次に、次のコードを実行します。

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

あなたはそれを知っていると思いますCustom Elements v0 is deprecated at M70, and will be removed in M80, by February, 2020.。

あなたができることは、Can I useウェブサイトに行き、ブラウザサポートバージョンをチェックして、どのブラウザがどのカスタム要素バージョンをロードすべきかを確認することです...

その後、以下を実装してブラウザーとバージョンを確認し、外部ライブラリを使用しない場合は、必要なブラウザーの適切なカスタム要素を適宜ロードします（詳細はこちら）。

外部ライブラリの使用に問題がない場合は、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.
}