说说你对slot的理解？slot使用场景有哪些？

yousuotu

于 2025-04-02 11:54:36 发布

阅读量859

点赞数 18

分类专栏：面试题文章标签：前端 javascript 前端框架

本文链接：https://blog.youkuaiyun.com/yousuotu/article/details/146940538

版权

一、slot是什么

在HTML中 slot 元素，作为 Web Components 技术套件的一部分，是Web组件内的一个占位符

该占位符可以在后期使用自己的标记语言填充

举个栗子

<template id="element-details-template">
  <slot name="element-name">Slot template</slot>
</template>
<element-details>
  <span slot="element-name">1</span>
</element-details>
<element-details>
  <span slot="element-name">2</span>
</element-details>

template不会展示到页面中，需要用先获取它的引用，然后添加到DOM中，

customElements.define('element-details',
  class extends HTMLElement {
   
    constructor() {
   
      super();
      const template = document
        .getElementById('element-details-template')
        .content;
      const shadowRoot = this.attachShadow({
   mode: 'open'})
        .appendChild(template.cloneNode(true));
  }
})