Как создавать пользовательские элементы веб-компонентов для работы с обеими спецификациями

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

Если я создаю компоненты со custom elements v0спецификацией, некоторые приложения столкнутся с проблемами, поскольку они используют polymer 2и выше, и той же проблемой с polymer 1приложениями, которые не будут работать со custom elements v1спецификацией.

У меня нет контроля над приложениями для изменения полизаполнений , некоторые приложения должны использовать полифилы, поддерживает старые спецификации, а некоторые используют новые полифилы.

Я ищу надежное решение для объединения обеих спецификаций для запуска моих пользовательских элементов во всех приложениях, независимо от версии 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.
}