By:moke(司嘉年)
Web Components are a new browser feature that provides a standard component model for the Web, consisting of several pieces: Shadow DOM, Custom Elements, HTML Imports and HTML Templates.
也就是说,Web Components 是 Web 组件模型标准,由浏览器提供原生特性支持,包括Shadow DOM,Custom Elements,HTML Imports 和 HTML Templates
// 从 video 说起,效果类似于
// 含有该片段的HTML页面将呈现一个功能完整的视频播放器,带播放按钮,进度条,音量调节按钮等等
<video src="./video.mp4" controls></video>
<input
type="text"
value="test"
placeholder="placeholder">
document.body.innerHTML = '<div class="container"></div>'
let host = document.querySelector('.container')
let root = host.createShadowRoot()
root.innerHTML = '<p>How <em>you</em> doin?</p>'
2. 此时的节点结构是:
<div class="container">
#shadow-root (open)
<p>How <em>you</em> doin?</p>
</div>
3. 可以对 Fragment 做 DOM 操作,相当于一个独立的HTML解析环境,不受外界干扰
Shadow DOM 这款工具旨在构建基于组件的应用。因此,可为网络开发中的常见问题提供解决方案:
Shadow Dom 对于事件通过在冒泡阶段 target 的重定向来封装事件,然后一些可能对页面造成影响的事件,Shadow Dom 就会影藏掉这些事件,也就是在冒泡到主页面的过程中被挡住了。
在 Google I/O 2018 大会上,Google 推出了 Polymer 3.0
Web 组件的生态系统从 HTML Imports 转移到 ES Modules。
包管理系统将支持 npm,更容易将基于 Polymer 的 web 组件和各种工具、框架协同使用。
1. Vue 在实现上遵从了部分 Web Components 规范,比如 Shadow DOM 里的 slot:
2. 因为 Web Components 规范尚不成熟,且支持性并不乐观,不用polyfill 就无法投入生产,Vue 依靠构建工具跨过了环境兼容性问题,不依赖浏览器特性支持,但同时也就舍弃了 Shadow DOM 封装性等 Web Components 核心优势
3. 另外,Web Components 是相对底层的组件规范,Vue 除了定义组件规范,还提供了组件通信,数据绑定等上层方案
React 和 web组件 被用以解决不同问题。
Web 组件为可重用组件提供了强大的封装能力,而 React 则是提供了保持 DOM 和数据同步的声明式库。二者目标互补。
可以在 Web 组件里使用 React,或者在 React 里使用 Web Components。
Angular 默认情况下没有使用 Web Components 的任何基础设施
不过这里有一个选项问题,就是 Angular 可以设置不同的 ViewEncapsulation,如果是 Native,那会使用到 Shadow DOM 的 API;如果是默认的 Emulated,就不会用到。
Web 「相关」规范设计中一般有一些基本的共识:
根本的问题在于,框架的职责在于提供一整套的解决方案,而平台 API 的设计要求是绝不能提供一整套的解决方案,这是无法调和的基本矛盾所在。
1. Web Components 做为浏览器底层特性不应该拿出来和 React 这类应用层框架相比较。
2. 未来 Web Components 会做为浏览器非常重要的特性存在
3. API 偏低层操作,易用性不够,在很长时间内开发者依旧会使用 React / Vue / Angular / Polymer 这样的框架
4. Web Components 可能会做为这些框架的底层来做组件间的互相引用的方法
Thanks