Web Component是什么?
Web Component 实际上一系列技术的组合,主要包含 3 部分:
- 自定义元素。 在 HTML 基础标签外扩展自定义标签元素,也就是我们平时使用框架的"组件";
- Shadow DOM。 主要用于将 Shadow DOM 的内容与外层 document DOM 隔离,可以理解为在document中的一个子容器,放置各种组件;
- HTML 模板。 使用 来定义组件模板,使用
作为插槽使用(Vuer一定不陌生);
在一份html文件中的一个web component看起来是这样的:
>
>插槽内容>
>
看起来很像Vue吧?接下来让我们一个个demo学习web component。
上手
由于Web Component亲和原生,因此无需其他包的依赖,一个index.html和一个index.js即可体验学习。
我们直接写一个html模板,文章的案例组件统称为
index.html:
>
>
>
>
>学习Web Component
>
>Web Component是微前端沙盒隔离原理的重要知识
>
>¥25.00
>
>
>
>