Создание пользовательского элемента не работает на YouTube, но работает на веб-сайте Vimeo. - PullRequest
Новая
       19

Создание пользовательского элемента не работает на YouTube, но работает на веб-сайте Vimeo.

0 голосов
/ 24 апреля 2020

Я делаю расширение chrome, а также изучаю пользовательские элементы. Поэтому я создал скрипт, использующий пользовательские элементы, и вставил его на сайт YouTube в Chrome, и он выдает эту ошибку, когда я пытаюсь создать свой пользовательский элемент:

enter image description here Но по какой-то причине мой код прекрасно работает на любом видео 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");

Я получил точно такую ​​же ошибку.

enter image description here

5) Теперь перейдите на другой сайт (https://vimeo.com/386352766) и повторите эти шаги.

Я не получил ошибку, когда вставил этот код в ... Почему? Почему я получаю сообщение об ошибке на YouTube, а не на Vimeo?

Ответы [ 2 ]

1 голос
/ 01 мая 2020

custom-elements-es5-adapter - это подход к созданию пользовательских элементов для работы в среде ES5. Это работает, загружая адаптер, сопровождаемый Вашим кодом, скомпилированным для ES5. Если адаптер используется, классы должны быть скомпилированы для ES5.

Сайты могут создавать две сборки: ES6 без адаптера для современных браузеров и ES5 с адаптером для старых браузеров. В этом случае ваш фрагмент кода будет хорошо работать в современных браузерах. Однако, похоже, YouTube поставляет ES5 для всех браузеров, поэтому адаптер выдает ошибку для синтаксиса класса, который он не поддерживает.

0 голосов
/ 24 апреля 2020

Я исправил это в своем расширении chrome, добавив babel-loader в конфигурацию моего веб-пакета, поэтому теперь мое расширение отлично работает на YouTube.

Но это все еще оставляет вопрос, почему пользовательские элементы ES6 не работают на Youtube из консоли браузера? Я все еще смущен этим

...