Her iki özellikle çalışmak için web bileşenleri özel öğeleri nasıl oluşturulur

Kullanımdan kaldırılan ve en son kararlı sürüm custom elements spec v0olan her iki spesifikasyonla da çalışması gereken bir bileşen oluşturmam gerekiyor .custom elements spec v1

custom elements v0Spec ile bileşenler oluşturursam, bazı uygulamalar kullanıldıkları için polymer 2yukarıdaki sorunlarla karşılaşırlar ve spec polymer 1ile çalışmayan uygulamalarla aynı sorunla karşılaşırlar custom elements v1.

Çoklu dolguları değiştirmek için uygulamalar üzerinde denetimim yok , bazı uygulamalar eski dolguları destekliyor ve bazı yeni dolguları kullanıyor.

Çoklu dolgular sürümüne bakılmaksızın, özel öğelerimi tüm uygulamalarda çalıştırmak için her iki özelliği de birleştirmek için sağlam bir çözüm arıyorum. Bileşenlerime herhangi bir poli dolum veya snippet parçası ekleyebilirim, böylece herhangi bir yerde çalışabilirler, araştırmamda her iki özelliği de destekleyen herhangi bir kütüphane veya çoklu dolgu bulamadım.

Ekli geri arama için aşağıda belirtilen haritalama gibi özellikleri de birleştirebilen bir adaptör yazmayı planlıyorum, bu düşünceye ilişkin girdiler çok takdir edilecektir.

connectedCallback(){
    this.attachedCallback();
}

Ben stenciljs kullanmaya çalıştım ama sadece özel öğeleri spec son sürümü ile çalışabilir. Ben önceki spec ile çalışmak için tweak için herhangi bir yol bulamadık.

Lütfen yukarıda belirtilen duruma uygun alternatifler ve uygulanabilir çözümler önerin.

Temel olarak, bileşeninizde çoklu dolgular içinde doğrudan veya dolaylı olarak tanımlanan bazı bağımlılıklar vardır. Bu bağımlılıkları bir bağımlılık grafiğinin düğümleri olarak kabul edersek, grafiklerin farklı olması sorunumuz var demektir. Her iki grafikte de bir düğüm bulunması mümkündür, ancak farklı davranırlar (bunun daha eski ve daha yeni uygulaması function) ve bir grafikte bulunan bazı düğümlerin başka bir düğümde eksik olması da mümkündür. Elbette kendinize ait bazı dolguları veya benzerlerini koyabilirsiniz, ancak daha sonra yardımcı olmaktan daha az olabilecek çoklu dolguları tutmanız gerekir.

Bence daha iyi bir yaklaşım function,

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

Bunu nasıl uygulayacağımdan emin değilim function, ancak functionuygun sürümü veren bir işlev varsa veya işlevler arasında bazı belirgin farklılıklar varsa, yukarıdaki işlevi buna göre uygulayabilirsiniz. Ve sonra, şu kodu çalıştırın:

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

Bunun farkında olduğunuzu sanıyorum Custom Elements v0 is deprecated at M70, and will be removed in M80, by February, 2020..

Yapabileceğiniz şey, Can I usehangi tarayıcının hangi özel öğeler sürümünü yüklemesi gerektiğini görmek için web sitesine gitmek ve tarayıcı destek sürümlerini kontrol etmektir ...

Daha sonra, harici kütüphaneleri kullanmak istemiyorsanız , tarayıcıyı ve sürümü kontrol etmek ve istenen tarayıcı için doğru özel öğeyi buna göre yüklemek için aşağıdakileri uygulayın ( daha fazla bilgi ).

Harici kütüphaneleri kullanmaya hazırsanız , sürümü, platformu vb. Tespit etmek için Bowser'ı deneyin .

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.
}