Web Components

我们通过自定义标签封装一些特定的DOM结构，在需要的地方使用，但在开发过程中我们需要将其单独提取出来，放在一个js文件中，这样方便的阅读以及维护，在需要使用的地方引入即可。 myElement.js

第一种 直接添加在标签中 这种方式的前提是，绑定的方法必须定义在自定义标签使用的页面 第二种 addEventListener 或者定义在自定义标签使用的页面

Template 我们在使用自定义标签时，通常会有一些复杂的页面结构，通过js方法去创建，会有点麻烦，而且阅读不方便，因此我们可以借助template标签实现html与javascript的分离

Shadow DOM（影子 DOM） 元素的功能私有，不用担心与文档的其他部分发生冲突，影子 DOM（Shadow DOM）允许你将一个 DOM 树附加到一个元素上，并且使该树的内部对于在页面中运行的

前端在开发页面的时候，对于一些重复的代码，我们希望可以提取出来，在需要的地方引入即可。在不适用前端框架的前提下，我们该如何实现