如何构建Web组件自定义元素以同时使用这两个规范

Question

我需要建立一个应该需要工作与两个规格，组件custom elements spec v0它得到了过时和custom elements spec v1，最新的稳定版本。

如果我使用custom elements v0规范构建组件，则某些应用程序将因为使用polymer 2和高于它们而面临问题，而与polymer 1无法使用custom elements v1规范的应用程序将面临同样的问题。

我无法控制更改Polyfill的应用程序，某些应用程序必须使用支持旧规范的Polyfill，而某些应用程序需要使用新的Polyfill。

我正在寻找一个可靠的解决方案，以结合这两个规范以在所有应用程序中运行我的自定义元素，而不管polyfills版本如何。我可以在组件中添加任何polyfill或snippet，以便它们可以在任何地方运行，但在我的研究中没有找到任何支持这两种规范的库或polyfill。

我打算编写一个适配器，该适配器可以结合下面提到的用于映射的回调的两个规范，对此思想的投入将不胜感激。

connectedCallback(){
    this.attachedCallback();
}

我尝试使用stenciljs，但它只能与最新版本的自定义元素规范一起使用。我还没有找到任何方法来对其进行调整以使其与早期规范兼容。

请针对上述情况提出一些可行的替代方案和可行的解决方案。

Answer 1

基本上你的组件有一些直接或间接在polyfills中定义的依赖项。如果我们将这些依赖关系视为依赖图的节点，那么我们就会遇到图不同的问题。有可能两个图中都存在一个节点，但行为不同（同一节点的较旧和较新的实现function），并且也可能图中存在的某些节点在另一个图中缺失。您当然可以放入一些您自己的 Polyfill 或类似的东西，但随后您需要维护 Polyfill，这可能没有什么帮助。

我认为更好的方法是实现一个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
}