Web Components 学习笔记一： Web Components是什么？解决了什么问题？

公众号：妙蛙种子前端

文章原文地址：Web Components笔记一： Web Components是什么？解决了什么问题？ | 妙蛙种子 - 记录WEB前端技术学习成长过程的博客

---

Web Components是HTML5提供的一种原生组件封装集成的方式，我们可以通过这种技术封装一些类似Vue自定义组件的元素，在html中直接使用。

提到Web Components我们优先会提到组件化，什么是组件化？指的是将相似的业务抽离成固定的交互形式，然后通过html、JavaScript、css去实现这个交互，并且将这个交互的html、JavaScript、css合并在一个独立、封闭的空间内，对外暴露功能接口。用面向对象的思维来看就是：高内聚、低耦合。

前端组件化的阻碍

在jQuery的时代，我们都会遇到这种场景：引入一个幻灯片的插件，js、css都正常引入了，但样式却和官方demo不一致。细查后发现其实是我们全局的css影响了插件的样式。当然第三方插件也有可能影响到我们的主页面