# Web Components
Web Components是一套原生的,允许我们自定义一套可重用有相应功能的元素的组件。
利用它,可以实现类似vue组件的可复用模块。
缺点: 兼容不好
相关知识:
1. Custom Element: 自定义元素
customElements的通过define方法来自定义元素
- 接受两个参数
- 第一个参数,自定义元素名
- 第二个元素,自定义元素的模板对象
- 例子: customElements.define('test-button', TestButton)
2. shadow Dom(影子DOM): 影子DOM将我们的自定义元素封装起来,并插入到文档中(影子dom中的内容是跟主文档隔开的)
3. template(模板)和 slot(插槽)
---
## 创建一个web Components的具体流程
1. 创建两个模板test-collapse 和 test-collapse-item
<template id="test-collapse">
<slot></slot>
</template>
<template id="test-collapse-item">
<div class="title">title内容</div>
<div class="content"><slot>&l