什么是插槽
slot是HTML <slot> 元素 ， 是 Web 组件内的一个占位符。该占位符可以在后期使用自己的标记语言填充，这样您就可以创建单独的 DOM 树，并将它与其它的组件组合在一起。这个是官方解释看起来很晦涩，用人话说的意思是“Slot插槽是个占位符（就是一个占位置的），它可以和其它组件一起合用，就是他是可以复用，比如一个模态框组件我在底部按钮那里加了个插槽，如果别人引用那个组件，不修改那底部按钮就按组件里设置的使用，如果加上slot的name就是启用插槽对底部按钮进行修改，你可以去掉按钮或者修改按钮的个数都全凭君意”。
template是什么？
各位是不是很奇怪我们说插槽为什么讲template，是不是要说埃尔斯在挂羊头卖狗肉，各位稍安勿躁，听我娓娓道来。在HTML中solt一般与template合用，做成一个个可以复用的组件。
1、<template> 标记用作容纳页面加载时对用户隐藏的 HTML 内容的容器。如果您有一些需要重复使用的 HTML 代码，则可以使用 <template> 标记。也就是说<template>包裹的内容是隐藏的在浏览器中不会渲染出来
2、<template> 中的内容可以稍后使用 JavaScript 呈现。也就是说让<template>包裹的内容在浏览器中渲染需要使用js去创造一个dom节点去挂载到HTML中任意一处dom下就能看得到<template>里的内容了。
一个完整的是slot组件是怎样的？
代码如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<template id="element-details-template">
<style>
details {
font-family: "Open Sans Light", Helvetica, Arial, sans-serif }
.name {
font-weight: bold; color: #217ac0; font-size: 120% }
h4 {
margin: 10px 0 -8px 0;
background: #217ac0;
color: white;
padding: 2px 6px;
border: 1px solid #cee9f9;
border-radius: 4px;
}
.attributes {
margin-left: 22px; font-size: 90% }
.attributes p {
margin-left: 16px; font-style: italic }
</style>
<details>
<summary>
