video标签是否属于WebComponent？有哪些原生WebComponent？

你的认知只对了一半，两者只是使用体感相似，本质上不属于同一套实现体系。
先说相似点：

• <video>自带浏览器内置的封装能力，内部的播放控制条、进度条、播放按钮等UI结构都被隔离在和Shadow DOM类似的内部DOM树中，外部写的普通CSS选择器无法选中修改内部样式，这点和Web Component的Shadow DOM封装特性高度一致
• 写在<video>标签里的<source>用于传入视频源、不支持时显示的回退文本，看起来和Web Component里通过slot传入内容、配置默认回退内容的用法几乎一模一样

但两者核心区别非常明显：

1. <video>是HTML规范定义的原生内置元素，诞生时间比Web Component规范早了十几年，是浏览器引擎底层硬编码实现的，根本不是用Custom Element、Shadow DOM、Slot这套Web Component API开发的
2. 子元素处理逻辑完全不同：<source>标签不会像slot内容那样被投射到内部DOM树参与渲染，浏览器只会在元素解析阶段直接读取它的src、type属性，挑选当前环境支持的视频源加载，解析完成后这些标签本身不会被渲染。而示例里的“Your browser does not support the video tag.”这段文本，只有当浏览器完全不识别<video>标签时才会显示，和Web Component里slot默认内容的触发逻辑完全不一样——只要浏览器支持<video>，写在标签内部、除了<source>、<track>这类被特殊识别的标签之外的普通内容，默认都不会显示，这和slot可以投射任意自定义内容的机制有本质区别。

你给出的是<video>的标准用法：

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

首先要纠正一个常见误区：Web Component本质是浏览器提供给开发者的一套组件化API，核心包含Custom Elements（自定义元素）、Shadow DOM（影子DOM隔离）、HTML Template（模板）、Slot（内容插槽）四个部分，设计目标是让开发者不用依赖第三方框架就能封装可复用的跨环境组件，规范本身并没有要求浏览器必须预制一批写好的Web Component供直接调用。
大家平时接触到的带内部封装UI的原生元素，比如<video>、<audio>、各类带原生弹窗/选择面板的<input>（比如date、color类型）、<select>、<details>/<summary>，虽然内部用了和Shadow DOM类似的机制做DOM和样式隔离，使用体感和Web Component很像，但它们都是浏览器引擎底层实现的原生HTML元素，不属于Web Component范畴。

目前原生开箱可用、符合Web Component标准的能力，主要就是规范提供的整套组件编写API，不需要引入任何依赖就能直接用这套API开发自定义组件。除此之外，规范原生支持自定义内置元素能力：可以基于现有的button、input、div等原生元素，通过is属性挂载自定义扩展逻辑，创建继承原生元素能力的自定义Web Component，这类是原生直接支持的可复用Web Component形态。

内容的提问来源于stack exchange，提问作者Max Pattern