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

Question

我需要构建一个需要同时使用这两种规范的组件，custom elements spec v0得到已弃用 和 custom elements spec v1 , 最新稳定版本。

如果我用 custom elements v0 构建组件规范某些应用程序将面临问题，因为它们正在使用 polymer 2及以上和 polymer 1 的相同问题无法使用 custom elements v1 的应用程序规范。

我无法控制应用程序来更改 polyfill，一些应用程序必须使用 polyfills 支持旧规范，而一些应用程序使用新的 polyfills。

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

我打算编写一个适配器，它可以结合下面提到的映射等规范以附加回调，对此想法的输入将不胜感激。

connectedCallback(){
    this.attachedCallback();
}

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

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

Answer 1

基本上，您的组件有一些直接或间接在 polyfill 中定义的依赖项。如果我们将这些依赖关系视为依赖关系图的节点，那么我们就会遇到图不同的问题。两个图中可能存在一个节点，但行为不同(相同 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
}