javascript - 创建自定义元素似乎不适用于 YouTube，但适用于 Vimeo 网站

Question

我一直在制作 Chrome 扩展，并且也在学习自定义元素。因此，我制作了一个使用自定义元素的脚本，并将其注入(inject) Chrome 上的 YouTube 网站，当我尝试创建自定义元素时，它会抛出此错误:

但由于某种原因，我的代码在任何 Vimeo 视频上都可以完美运行。

所以我进行了实验并注意到一些有趣的东西你可能可以复制。

1) 打开 Chrome 或 FireFox

2) 转到一些 Youtube 视频(比如这个)https://www.youtube.com/watch?v=gQPUnk12nTM

3)打开控制台

4)粘贴此代码:

class TestElement extends HTMLElement
{
    constructor()
    {
        super();
    }
};
window.customElements.define("test-element", TestElement);
var testElement = document.createElement("test-element");

我得到了完全相同的错误。

5) 现在，转到其他网站 ( https://vimeo.com/386352766 ) 并重复这些步骤。

当我粘贴该代码时没有收到错误。为什么？为什么我在 YouTube 上收到错误，但在 Vimeo 上却没有？

Answer 1

custom-elements-es5-adapter是一种让自定义元素在 ES5 环境中工作的方法。它的工作原理是加载适配器，然后加载为 ES5 编译的代码。如果使用适配器，则必须为 ES5 编译类。

站点可以创建两个版本，一个是不带适用于现代浏览器的适配器的 ES6，另一个是带有适用于旧浏览器的适配器的 ES5。在这种情况下，您的代码片段可以在现代浏览器中正常工作。不过，YouTube 似乎正在向所有浏览器提供 ES5，因此适配器会针对它不支持的类语法抛出错误。