Web Components初探

组件化，标签语义化，是前端发展的趋势。现在流行的组件化框架有React、Vue等，标签语义化在H5中添加的article、dialog等。
Web Components 就是类似的一套技术，允许您创建可重用的定制元素，并且在您的web应用中使用它们。

Web Components由三项主要技术组成，它们可以一起使用来创建封装功能的定制元素，可以在你喜欢的任何地方重用，不必担心代码冲突。

• Custom elements（自定义元素）：一组JavaScript API，允许您定义custom elements及其行为，然后可以在您的用户界面中按照需要使用它们。
• Shadow DOM（影子DOM）：一组JavaScript API，用于将封装的“影子”DOM树附加到元素（与主文档DOM分开呈现）并控制其关联的功能。通过这种方式，您可以保持元素的功能私有，这样它们就可以被脚本化和样式化，而不用担心与文档的其他部分发生冲突。
• HTML templates（HTML模板）：