Можно ли инкапсулировать код при расширении тега видео с использованием технологий веб-компонентов? - PullRequest
Новая
       18

Можно ли инкапсулировать код при расширении тега видео с использованием технологий веб-компонентов?

0 голосов
/ 15 апреля 2019

Я пытаюсь расширить тег видео с помощью технологий веб-компонентов (шаблоны HTML, Shadow DOM, пользовательские элементы). Я хотел бы заключить в капсулу мои стили и DOM (отредактированный). Однако, поскольку мы не можем прикрепить Shadow DOM к тегу видео, я не уверен, как достичь этой цели (или если эта цель возможна даже с использованием только технологий веб-компонентов).

Например, я хотел бы охватить все содержимое шаблона (строки 14-230) классом TimeStamp (который расширяет тег video) в моем файле main.js. https://github.com/chelBot/videoJS/blob/master/index.html

Любое понимание очень ценится!

1 Ответ

0 голосов
/ 16 апреля 2019

Вместо того, чтобы пытаться обновить компонент <video>, вы можете создать класс для вашего собственного компонента, который будет использовать свой собственный CSS, и у класса будут все ваши собственные JS.

Помните, что shadowDOMне инкапсулирует JavaScript, только DOM и CSS.Лучший способ инкапсулировать ваш JS - это поместить его в свой собственный класс.

Ваш шаблон может быть таким простым: 

const template = `<style>
:host {
  display: inline-block;
  Anything else for the component shell
}
</style>
<video></video>`;

Вам потребуется JavaScript, чтобы взять некоторые атрибуты и дочерние элементы и передать их элементу <video>.Но это не должно быть сложно.

...