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

【问题标题】：Creating a Custom Element don't seem to work on YouTube but works on Vimeo website创建自定义元素似乎不适用于 YouTube，但适用于 Vimeo 网站
【发布时间】：2020-08-08 00:25:35
【问题描述】：

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

但由于某种原因，我的代码在任何 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 上却没有？

【问题讨论】：

标签： javascript ecmascript-6 youtube web-component ecmascript-5

【解决方案1】：

我通过在我的 webpack 配置中添加一个 babel-loader 在我的 chrome 扩展程序中修复了这个问题，所以我的扩展程序现在在 YouTube 上运行良好。

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

【讨论】：

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

【解决方案2】：

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

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

【讨论】：