Web Components ---模板（template）插槽（slot）

Template

我们在使用自定义标签时，通常会有一些复杂的页面结构，通过js方法去创建，会有点麻烦，而且阅读不方便，因此我们可以借助template标签实现html与javascript的分离

template标签及其内容不会在 DOM 中渲染，但仍可使用 JavaScript 引用它，我们使用template创建复杂的DOM，再引用时是获取其content,直接将template标签加入body中，是渲染不出来的，虽然，打开控制台，可以看到template及其内容标签等。

模板内容

 <template id="my-element">
      <div class="wrapper">
        <div class="title">我来自于模板</div>
        <dl class="content">
          <dt>水果</dt>
          <dd>苹果</dd>
          <dd>梨</dd>
          <dd>山竹</dd>
          <dd>葡萄</dd>
        </dl>
        <dl>
          <dt>欢迎来到css世界</dt>
          <dd>这里有，html教程</dd>
          <dd>这里有，css模块</dd>
          <dd>这里有，css教程</dd>
        </dl>
      </div>
    </template>

Java script内容

class MyElement extends HTMLElement {
    constructor() {
      super();
        const template = document.getElementById("my-element");
        this.appendChild(template.content);
      }
   }

customElements.define("my-element", MyElement);

运行结果

我们可以在模板中添加样式，然后使用影子DOM，这样可以实现样式隔离。模板中的样式不会影响到外部标签，同样外部样式也不会影响到模板中的标签。

<template id="my-element">
      <style>
        .wrapper{
            padding:20px;
            background-color: skyBlue;
        }

        .title{
            font-size:20px;
            font-weight:bold;
        }

        dl{
            display:inline-block;
            padding: 20px;
        }
        dd{
            margin-left: 0;
        }
      </style>
      <div class="wrapper">
       //此处省略
      </div>
    </template>

运行效果

Slot

我们不管是使用template还是通过js方法创建的html都是固定的，但是在实际项目应用中，我们希望封装的这部分HTML能够适应不同的页面，能够让它灵活一点，这时就需要借助插槽slot，来满足我们的需求。

插槽有默认插槽和具名插槽两种，具名插槽需要在slot中添加name属性定义插槽名，再使用的时候，通过在标签中添加slot属性匹配具体的插槽。

下边是具名插槽和默认插槽的使用方法：

<my-element>
      我是默认插槽
   <div slot="abc">我是具名插槽</div>
</my-element>
 <template id="my-element">
      <style>
        /*此处省略一部分代码*/
      </style>
      <div class="wrapper">
        <slot name="abc">具名插槽默，无内容时</slot>
        <div class="title">我来自于模板</div>
         /*此处省略一部分代码*/
        <p>
          <slot>我是默认插槽，无内容时</slot>
        </p>
      </div>
    </template>

显示效果

我们可以给插槽定义默认内容，即在没有使用插槽的情况下，我们希望展示的内容。插槽slot标签内包裹的内容是当没有使用插槽时的默认值,下边是我们直接使用标签，没有添加插槽的使用情况

<my-element></my-element>

显示效果