두 스펙 모두에서 작동하도록 웹 컴포넌트 사용자 정의 요소를 빌드하는 방법

나는 모두 사양, 작업해야한다 구성 요소 구축 할 필요가 custom elements spec v0있어 사용되지 와 custom elements spec v1, 최신 안정 버전.

custom elements v0사양으로 구성 요소를 빌드하면 일부 앱은 사용 polymer 2하고 있기 때문에 문제가 발생 polymer 1하며 custom elements v1사양에서 작동하지 않는 응용 프로그램 과 동일한 문제가 발생 합니다.

폴리 필을 변경하는 애플리케이션을 제어 할 수 없으며 일부 애플리케이션은 이전 사양을 지원하는 폴리 필을 사용해야하고 일부는 새로운 폴리 필을 사용합니다.

polyfills 버전에 관계없이 모든 응용 프로그램에서 사용자 정의 요소를 실행하기 위해 두 사양을 결합하는 견고한 솔루션을 찾고 있습니다. 구성 요소에 폴리 필 또는 스 니펫을 추가하여 어디에서나 실행할 수 있으므로 연구에서 두 사양을 모두 지원하는 라이브러리 또는 폴리 필을 찾지 못했습니다.

첨부 된 콜백에 대해 아래 언급 된 매핑과 같은 두 사양을 결합 할 수있는 어댑터를 작성할 계획입니다.이 생각에 대한 의견은 크게 감사하겠습니다.

connectedCallback(){
    this.attachedCallback();
}

stenciljs 를 사용 하려고 했지만 최신 버전의 사용자 정의 요소 사양에서만 작동 할 수 있습니다. 이전 사양에서 작동하도록 조정하는 방법을 찾지 못했습니다.

위에서 언급 한 상황에 대해 실행 가능한 대안과 가능한 해결책을 제안하십시오.

기본적으로 컴포넌트에는 직접 또는 간접적으로 polyfill에 정의 된 일부 종속성이 있습니다. 이러한 의존성을 의존성 그래프의 노드로 생각하면 그래프가 다르다는 문제가 있습니다. 노드가 두 그래프에 모두 존재할 수 있지만 다른 동작 (이전 및 최신의 동일한 구현 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.
}