前言

在Vue中也有template和slot标签，这里我们就只对html中的这两标签做个简单介绍

一、template

template：内容模板元素。是一种用户保存客户端内容机制，该内容在加载页面是不会呈现，但随后可能可以在运行时使用JavaScript实例化

使用<template>标签在页面加载时该标签中的内容不会显示。但是在后台查看页面DOM结构存在<template>标签。这是因为template标签天生不可见，它设置了display:none;属性。

<!--当前页面只显示"小猪佩奇"这个内容，不显示"我是template",这是因为template标签天生不可见-->
<template>
    <div>
        我是template
    </div>
</template>
<h1>小猪佩奇</h1>

如果想要显示<template>中的内容，可以加载后使用 JavaScript 来显示它。

<button onclick="showPig()">显示隐藏内容</button>
<template>
  <h1>小猪佩奇</h1>
</template>
     
<script>
function showPig() {
  var item = document.getElementsByTagName("template")[0]
  var clon = item.content.cloneNode(true);
  document.body.appendChild(clon);
  }
</script>

二、slot

2.1 slot介绍

slot: 作为 Web Component 技术套件的一部分，是 Web 组件内的一个占位符。该占位符可以在后期使用自己的标记语言填充，这样你就可以创建单独的 DOM 树，并将它与其他的组件组合在一起。

简单理解，就是提供一个方案，可以让用户直接传递一段 HTML 内容给组件内

2.2 slot使用

<slot>元素只能在 shadow DOM中使用才有插槽效果，否则，就可以看成是个普通的 HTML 元素。

例如，直接在 <body> 元素下的这段 HTML 代码是无效的，即图片元素是无法替换“占位元素”这个内容的：

<img src="1.png" slot="some">
<p>
    内容：<slot name="some">占位元素</slot>
</p>

2.3 插槽匹配规则

一句话概括就是：

<slot> 插槽元素的name 属性值和任意 HTML 元素的 slot 属性值一致的时候会被匹配。

具体细节如下：

name值唯一。<slot> 支持 name 属性，可以看成是身份标识，需要是唯一的，因为多个相同 name 最多只会匹配一个插槽元素。
slot属性值可以不唯一
一个组件可以多个插槽。同一个组件可以使用多个插槽
必须是组件的子元素。用来匹配的元素也必须写在自定义元素组件中，作为子元素存在

2.4 slot 元素中的事件

只需要在原始的 <slot> 元素或者匹配的元素上写事件就可以，DOM 层级关系依然按照原始的 DOM 关系处理就可以了。

【HTML】template && slot

前言