Javascript 创建自定义元素don'；在YouTube上似乎不起作用，但在Vimeo网站上起作用

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

但出于某种原因，我的代码在任何Vimeo视频上都能正常工作

所以我做了实验，发现了一些有趣的东西，你也许可以复制

1） 打开Chrome或FireFox

2） 转到一些Youtube视频（像这个）

3） 打开控制台

4） 粘贴此代码：

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

我犯了完全相同的错误

5） 现在，转到其他站点（）并重复这些步骤

---

我在粘贴代码时没有出错..为什么？为什么我在YouTube上出现错误，而不是Vimeo？

我在chrome扩展中通过在我的网页包配置中添加一个babel加载程序解决了这个问题，所以我的扩展现在在YouTube上运行良好

但这仍然留下了一个问题，为什么ES6自定义元素不能从浏览器控制台在Youtube上工作？我仍然感到困惑的是，

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

---

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

错误在polyfill中，因此，如果使用polyfill，则看起来您无法进入本机。如果您使用native，则不需要polyfill，因此不要加载它。看起来YouTube为所有浏览器提供了相同的代码。。当然。。因为他们在2年前将YouTube转换为使用组件。。。所以他们不得不使用polyfill，因为v1还没有完成。我不知道（我现在拒绝做polyfill开发）也许可以嗅到polyfill。因此，对于YouTube扩展，您需要使用ES5代码。YouTube在您的浏览器客户端上强制使用polyfill。