webComponent浅析_web component

了解webComponent概念：

web component是浏览器环境提供的一些新的原生支持的api和模版，它是一套可以支持原生实现组件化的技术；具体涉及到Custom elements（自定义元素）、Shadow DOM（影子DOM）和HTML template（HTML模板）。提供了对布局视图封装能力，可以让DOM、CSSOM和JavaScript在局部环境中运行，使得局部CSS和DOM不会影响到全局。

和目前的前端框架中组件概念有何区别：

组件化的特点：

• 高内聚，低耦合

• 标记鲜明易维护

• 块状接口易扩展

框架组件化的特点：

• 高效复用

• 作用域及样式隔离

• 自定义开发

• 钩子函数(生命周期)

web component提供了：

1.Custom elements：自定义元素，通过使用对应的api，用户可以在不依赖框架的情况下，开发原生层面的自定义元素，最关键的是，它将包含独立的生命周期，以及提供了自定义属性的监听。这就意味着它也同样具备了较高的可操作性。

2.Shadow DOM：影子dom(最大的特点是不暴露给全局)，你可以通过对应的api，将shadow dom附加给你的自定义元素，并控制其相关功能。利用shadow dom的特性，起到隔离的作用，使特性保密，不用再担心所编写的脚本及样式与文