Web Components是HTML5的原生组件技术，用于封装类似Vue的自定义元素，解决前端组件化中的样式冲突和DOM操作影响。Vue通过`scoped`属性实现组件样式隔离，而Web Components利用Custom Elements和Shadow DOM特性，实现组件的独立状态和样式隔离。Custom Elements允许创建自定义DOM元素，Shadow DOM则提供了一种隐藏DOM树的方法，确保内部样式不会影响外部元素。
公众号：妙蛙种子前端
文章原文地址：Web Components笔记一： Web Components是什么？解决了什么问题？ | 妙蛙种子 - 记录WEB前端技术学习成长过程的博客
Web Components是HTML5提供的一种原生组件封装集成的方式，我们可以通过这种技术封装一些类似Vue自定义组件的元素，在html中直接使用。
提到Web Components我们优先会提到组件化，什么是组件化？指的是将相似的业务抽离成固定的交互形式，然后通过html、JavaScript、css去实现这个交互，并且将这个交互的html、JavaScript、css合并在一个独立、封闭的空间内，对外暴露功能接口。用面向对象的思维来看就是：高内聚、低耦合。
前端组件化的阻碍
在jQuery的时代，我们都会遇到这种场景：引入一个幻灯片的插件，js、css都正常引入了，但样式却和官方demo不一致。细查后发现其实是我们全局的css影响了插件的样式。当然第三方插件也有可能影响到我们的主页面&
最低0.47元/天 解锁文章
扫一扫
1527
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
