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

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

9 голосов
/ 09 октября 2019

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

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

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

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

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

connectedCallback(){
    this.attachedCallback();
}

Я пытался использовать stenciljs , но он может работать только с последнимиверсия пользовательских элементов спец. Я не нашел способа настроить его, чтобы он работал с более ранней спецификацией.

Пожалуйста, предложите несколько жизнеспособных альтернатив и возможных решений вышеупомянутой ситуации.

Ответы [ 2 ]

1 голос
/ 16 октября 2019

В основном ваш компонент имеет некоторые зависимости, которые определены в полизаполнениях либо напрямую, либо косвенно. Если мы рассмотрим эти зависимости как узлы графа зависимостей, то у нас возникнет проблема отличия графов. Возможно, что узел существует в обоих графиках, но ведет себя по-разному (более старая и более новая реализация одного и того же 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
}
0 голосов
/ 17 октября 2019

Я подозреваю, что вы знаете, что 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.
}
...