Web Components实现类Element UI中的Card卡片

目录

• 引言
• Web Components 核心组成
• 1. Custom Elements
• 2. Shadow DOM
• 3. templates 和 slots
• 完整代码
• Web Components vs Vue Components
• Web Components 生命周期回调函数
• 优点 and 缺点
• 基于web components的框架

引言

Web Components 是一个浏览器原生支持的组件化方案，允许你创建新的自定义、可封装、可重用的HTML 标记。不用加载任何外部模块，直接就可以在浏览器中跑。本文就简单介绍一下：使用 Web Components 实现一个类 Element UI 中的 Card 卡片组件。

随着前端工程化生态日益成熟，出现了很多优秀的框架，如：Vue、React、Angular等等，极大的提高了日常开发效率。

其中组件化开发发挥了至关重要的作用，但是这些组件化开发都需要依赖第三方框架，编译打包之后才能在浏览器正常使用。

而原生组件 Web Components ，相比与第三方框架使用起来更简单直接，符合直觉，不用加载任何外部模块，代码量小。

Web Components 核心组成

• 自定义元素（custom element），使用 window.customElements.define API注册
• Shadow DOM隔离，影藏标记结构、样式和行为
• 可以在