Як побудувати спеціальні елементи веб-компонентів для роботи з обома специфікаціями

Мені потрібно створити компонент, який повинен працювати з обома специфікаціями, custom elements spec v0які застаріли і custom elements spec v1, остання стабільна версія.

Якщо я будую компоненти за допомогою custom elements v0специфікації, то деякі додатки зіткнуться з проблемами, оскільки вони використовують polymer 2і вище, і тією ж проблемою, що і з polymer 1програмами, які не працюватимуть зі custom elements v1специфікацією.

У мене немає контролю над програмами для зміни поліфілів , у деяких додатках доводиться використовувати polyfills, які підтримують старі характеристики, а деякі використовують нові.

Я шукаю надійне рішення, щоб поєднати обидві характеристики для запуску моїх спеціальних елементів у всіх програмах, незалежно від версії polyfills. Я можу додати до своїх компонентів будь-який шматок поліфіл або фрагмент, щоб вони могли працювати де завгодно, я не знайшов жодної такої бібліотеки чи поліфау, які б підтримували обидві характеристики у моїх дослідженнях.

Я планую написати адаптер, який може поєднувати обидві характеристики, як, наприклад, картографування, згадані нижче для доданого зворотного дзвінка, введення цієї думки будуть дуже вдячні.

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