在使用Web组件技术扩展视频标签时，我可以封装代码吗？

Question

我正在尝试使用Web组件技术（HTML模板，Shadow DOM，自定义元素）扩展视频标记。我想封装我的样式和DOM（编辑）。但是，由于我们无法将Shadow DOM附加到视频标记，因此我不确定如何实现此目标（或者，如果仅使用Web组件技术可实现此目标）。

例如，我想将模板的所有内容（第14-230行）扩展到我的main.js文件中的TimeStamp类（扩展视频标记）。 https://github.com/chelBot/videoJS/blob/master/index.html

非常感谢任何见解！

Answer 1

您可以为自己的组件创建一个类，而不是尝试升级<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>元素。但这应该不难。