slot标签的作用及使用方法详解

学习知识要善于思考，思考，再思考！今天golang学习网小编就给大家带来《slot标签的作用是为Web组件提供内容插入的位置，允许父组件向子组件中注入自定义内容。在使用时，通过在子组件的模板中添加``标签，父组件可以通过该标签将内容传递给子组件，实现内容的动态替换和扩展。》，以下内容主要包含等知识点，如果你正在学习或准备学习文章，就都不要错过本文啦~让我们一起来看看吧，能帮助到你就更好了！

slot 标签是 Web Components 中用于内容分发的核心机制，它允许外部内容通过默认插槽和具名插槽两种方式投射到自定义元素的指定位置；1. 默认插槽接收所有未指定 slot 属性的子元素；2. 具名插槽通过 name 属性与外部元素的 slot 属性匹配，实现精准内容分发；组件内部可通过 assignedNodes() 和 assignedElements() 方法访问投射内容；与框架的 content 分发不同，slot 是原生、声明式且不依赖运行时的，具备更强的封装性与跨框架互操作性，最终实现结构与内容分离的高复用组件。

slot 标签在 Web Components 的世界里，其实就是一种内容分发的机制，它允许你定义自定义元素内部的占位符，让外部内容可以“投射”进来。简单来说，它为你的组件提供了一个灵活的“开口”，让父组件可以根据需要，往这个“开口”里塞入不同的 HTML 片段，从而实现组件的高度可配置和复用。这就像搭积木，你搭好了主体结构，但有些地方留了“槽”，让别人可以放他们自己的小配件进去。

解决方案

要理解 slot 的核心作用，得从 Web Components 的封装性说起。自定义元素（Custom Elements）默认是隔离的，它们的内部 DOM 结构和样式都被 Shadow DOM 封装起来，外部很难直接干预。但组件往往需要接收并显示外部提供的内容，比如一个卡片组件，你希望它的标题、内容、图片都是动态传入的。这时候，slot 就登场了。

它主要有两种用法：

1. 默认插槽（Default Slot） 这是最简单也最常用的方式。在你的自定义元素模板中，放置一个 标签，它会成为一个匿名占位符。当你在使用这个自定义元素时，所有不带 slot 属性的子元素，都会被“投射”到这个默认插槽的位置。

示例：一个简单的卡片组件

my-card.js (定义自定义元素)

class MyCard extends HTMLElement {
  constructor() {
    super();
    const shadowRoot = this.attachShadow({ mode: 'open' });
    shadowRoot.innerHTML = `
      <style>
        .card {
          border: 1px solid #ccc;
          padding: 15px;
          margin: 10px;
          border-radius: 8px;
          box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
        }
        ::slotted(h2) { /* 针对投射进来的 H2 标题应用样式 */
          color: #333;
          margin-top: 0;
        }
        ::slotted(p) {
          color: #666;
        }
      </style>
      <div class="card">
        <slot></slot> <!-- 默认插槽，所有未具名的内容都会到这里 -->
      </div>
    `;
  }
}
customElements.define('my-card', MyCard);

index.html (使用自定义元素)

<my-card>
  <h2>我的卡片标题</h2>
  <p>这是卡片的主要内容，可以放任何HTML。</p>
  <button>点击我</button>
</my-card>

<my-card>
  <h3>另一张卡片</h3>
  <p>这里只有一段简单的文本。</p>
</my-card>

在这个例子中，

、

和 标签会被自动插入到 my-card 内部的 位置。

2. 具名插槽（Named Slots） 当你的组件需要更精细的内容分发时，具名插槽就派上用场了。你可以给 标签添加 name 属性，比如 。外部内容要投射到这个特定插槽时，也需要加上对应的 slot 属性，例如

。

示例：一个带页眉和页脚的布局组件

my-layout.js

class MyLayout extends HTMLElement {
  constructor() {
    super();
    const shadowRoot = this.attachShadow({ mode: 'open' });
    shadowRoot.innerHTML = `
      <style>
        .container {
          display: flex;
          flex-direction: column;
          border: 1px solid #eee;
          padding: 10px;
          margin: 10px;
          border-radius: 5px;
        }
        .header, .footer {
          background-color: #f0f0f0;
          padding: 8px;
          text-align: center;
          margin-bottom: 10px;
        }
        .main-content {
          flex-grow: 1;
          padding: 10px 0;
        }
        ::slotted([slot="header"]) {
            font-weight: bold;
            color: blue;
        }
        ::slotted([slot="footer"]) {
            font-size: 0.9em;
            color: gray;
        }
      </style>
      <div class="container">
        <div class="header">
          <slot name="header"></slot> <!-- 页眉插槽 -->
        </div>
        <div class="main-content">
          <slot></slot> <!-- 默认插槽，用于主要内容 -->
        </div>
        <div class="footer">
          <slot name="footer"></slot> <!-- 页脚插槽 -->
        </div>
      </div>
    `;
  }
}
customElements.define('my-layout', MyLayout);

index.html

<my-layout>
  <h1 slot="header">欢迎来到我的网站</h1> <!-- 投射到header插槽 -->
  <p>这是网站的主要内容区域，可以放很多段落。</p> <!-- 投射到默认插槽 -->
  <p>甚至可以有图片。</p>
  <div slot="footer">版权所有 © 2023</div> <!-- 投射到footer插槽 -->
</my-layout>

<my-layout>
  <span slot="header">简易布局</span>
  <p>只有一点点内容。</p>
  <small slot="footer">底部信息</small>
</my-layout>

通过具名插槽，你可以清晰地定义组件内部的不同区域，让使用者在调用组件时，能够精准地将内容放置到预设的位置，极大地增强了组件的灵活性和可维护性。这比单纯地传递字符串属性要强大得多，因为它传递的是完整的 DOM 结构。

Web Components插槽与传统组件内容分发的区别是什么？

当我们谈论 Web Components 的 slot 时，我个人觉得它最迷人的地方在于它提供了一种声明式、原生的内容投射机制，这与许多前端框架（如 React、Vue）中通过 props.children 或 （框架特有）实现的内容分发有异曲同工之妙，但其底层逻辑和封装性体验却截然不同。

传统框架中的内容分发，无论是 React 的 children 属性，还是 Vue 的 语法糖，本质上都是在框架的虚拟 DOM 层面上进行操作和管理。它们依赖于框架的运行时，将父组件传递的子组件或内容，通过特定的 API 或语法规则，注入到子组件的渲染函数中。这意味着，内容分发的过程是框架“掌控”的。如果你脱离了那个框架，这些机制就无法独立运行。

而 Web Components 的 slot 则是浏览器原生支持的，它直接利用了 Shadow DOM 的能力。当内容被“投射”到 slot 中时，这些内容实际上是从父组件的轻量级 DOM 移动到了子组件的 Shadow DOM 内部。这种移动不是简单的复制或字符串拼接，而是一种实实在在的 DOM 节点重定向。投射进去的内容仍然保持其原有的作用域和行为，但其最终的渲染位置和可能受到的样式影响（通过 ::slotted 伪元素）则由 Shadow DOM 控制。

我觉得这种原生性带来了几个关键优势：

1. 独立性与互操作性：Web Components 是标准，不依赖任何框架。一个使用了 slot 的自定义元素，可以在任何支持 Web Components 的环境中使用，无论是 React、Vue、Angular 还是纯 HTML/JavaScript 项目。而框架特有的内容分发机制，往往只能在其对应的框架生态中使用。
2. 更强的封装性：slot 结合 Shadow DOM，确保了组件内部结构与外部内容的清晰分离。外部内容通过 slot 进入，但它仍然是 Shadow DOM 内部的一部分，可以被组件内部的样式和逻辑以更受控的方式处理。这有助于避免样式冲突和不必要的 DOM 结构暴露。
3. 直观的语义化：slot 标签本身就是对内容占位符的语义化表达，开发者在编写组件模板时，能更直观地理解哪里是外部内容可插入的区域。

当然，框架的 slot 机制往往会提供更高级的特性，比如作用域插槽（scoped slots），允许子组件向父组件投射的内容传递数据，实现更复杂的双向通信。Web Components 的原生 slot 并没有直接提供这样的机制，但你可以通过自定义事件（Custom Events）或属性（Properties）来模拟类似的功能，只是需要更多的手动实现。对我而言，这种“原生”和“更接近底层”的感觉，让 slot 显得更加纯粹和强大。

如何在自定义元素中使用具名插槽（Named Slots）实现复杂布局？

具名插槽是构建复杂、可重用布局组件的利器。它的核心思想是：将一个组件的内部结构划分为多个语义化的区域，每个区域都通过一个唯一的 name 属性来标识。外部在使用这个组件时，只需要将相应的内容标记上对应的 slot 属性，浏览器就会自动将其“路由”到正确的占位符位置。

想象一下，你正在构建一个仪表盘（Dashboard）组件，它可能包含头部导航、侧边栏、主内容区和底部版权信息。如果只用一个默认插槽，所有内容都会堆在一起，你无法控制它们的具体位置。但有了具名插槽，你可以这样做：

1. 定义组件内部的布局结构与具名插槽：

dashboard-layout.js

class DashboardLayout extends HTMLElement {
  constructor() {
    super();
    const shadowRoot = this.attachShadow({ mode: 'open' });
    shadowRoot.innerHTML = `
      <style>
        .dashboard-container {
          display: grid;
          grid-template-areas:
            "header header"
            "sidebar main"
            "footer footer";
          grid-template-rows: auto 1fr auto; /* header和footer高度自适应，main区域占据剩余空间 */
          grid-template-columns: 200px 1fr; /* sidebar固定宽度，main区域占据剩余宽度 */
          height: 100vh; /* 假设布局占据整个视口高度 */
          gap: 10px;
        }

        .dashboard-header { grid-area: header; background-color: #f8f9fa; padding: 15px; border-bottom: 1px solid #eee; }
        .dashboard-sidebar { grid-area: sidebar; background-color: #e9ecef; padding: 15px; border-right: 1px solid #eee; }
        .dashboard-main { grid-area: main; background-color: #fff; padding: 15px; overflow-y: auto; }
        .dashboard-footer { grid-area: footer; background-color: #f8f9fa; padding: 10px; text-align: center; border-top: 1px solid #eee; }

        /* 针对投射内容的样式调整 */
        ::slotted([slot="header"]) {
            font-size: 1.5em;
            font-weight: bold;
            color: #333;
        }
        ::slotted([slot="sidebar"]) {
            color: #555;
        }
        ::slotted([slot="footer"]) {
            font-size: 0.85em;
            color: #777;
        }
      </style>
      <div class="dashboard-container">
        <header class="dashboard-header">
          <slot name="header"></slot>
        </header>
        <aside class="dashboard-sidebar">
          <slot name="sidebar"></slot>
        </aside>
        <main class="dashboard-main">
          <slot></slot> <!-- 默认插槽用于主内容 -->
        </main>
        <footer class="dashboard-footer">
          <slot name="footer"></slot>
        </footer>
      </div>
    `;
  }
}
customElements.define('dashboard-layout', DashboardLayout);

2. 在外部使用组件并填充具名插槽：

index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的仪表盘</title>
    <script src="dashboard-layout.js" defer></script>
    <style>
        body { margin: 0; font-family: sans-serif; }
    </style>
</head>
<body>
    <dashboard-layout>
        <h1 slot="header">我的管理后台</h1>
        <nav slot="sidebar">
            <ul>
                <li><a href="#">用户管理</a></li>
                <li><a href="#">数据分析</a></li>
                <li><a href="#">设置</a></li>
            </ul>
        </nav>
        <!-- 这里是默认插槽的内容，也就是主内容区域 -->
        <div>
            <h2>欢迎回来！</h2>
            <p>这里是仪表盘的主体内容，可以放置各种图表、表格和信息卡片。</p>
            <p>比如：</p>
            <ul>
                <li>今日活跃用户：12345</li>
                <li>新增订单：567</li>
                <li>待处理任务：8</li>
            </ul>
            <p>你可以继续添加更多内容来填充这个区域。</p>
        </div>
        <div slot="footer">© 2023 我的公司. 保留所有权利。</div>
    </dashboard-layout>
</body>
</html>

通过这种方式，dashboard-layout 组件就变成了一个灵活的布局容器。它定义了“骨架”，而“血肉”（具体的内容）则由外部提供，并通过 slot 属性精准地填充到各个预设的位置。这使得组件的复用性大大提高，你可以用同一个 dashboard-layout 组件来构建不同功能、不同内容的仪表盘页面，而无需修改组件本身的内部逻辑。这种模式在构建设计系统和大型应用时尤其有用，因为它强制了一种结构和内容分离的良好实践。

插槽内容在组件内部如何访问和处理？

虽然 slot 的主要目的是内容投射，让内容在 Shadow DOM 内部渲染，但有时我们确实需要在自定义元素内部访问或操作这些被投射进来的节点。比如，你可能想对插槽中的特定元素执行一些 JavaScript 逻辑，或者在组件初始化时检查插槽是否为空。

要访问插槽内容，你不能直接通过 this.shadowRoot.querySelector('slot').children 这样的方式，因为 slot 标签本身在渲染后并不会包含这些被投射的节点。它只是一个占位符。正确的方法是使用 HTMLSlotElement 接口提供的两个方法：assignedNodes() 和 assignedElements()。

1. assignedNodes()： 这个方法会返回一个 NodeList，其中包含所有被分配到该插槽的节点（包括文本节点、注释节点等）。

2. assignedElements()： 这个方法则返回一个 HTMLCollection，其中只包含被分配到该插槽的元素节点（不包括文本节点、注释节点）。通常情况下，assignedElements() 更常用，因为它返回的是可操作的 HTML 元素。

示例：访问并处理插槽内容

假设我们有一个 expandable-card 组件，当用户点击某个按钮时，我们希望能够获取并处理插槽内的特定内容。

expandable-card.js

class ExpandableCard extends HTMLElement {
  constructor() {
    super();
    const shadowRoot = this.attachShadow({ mode: 'open' });
    shadowRoot.innerHTML = `
      <style>
        .card {
          border: 1px solid #ddd;
          padding: 15px;
          margin: 10px;
          border-radius: 5px;
          background-color: #f9f9f9;
        }
        .header-slot {
          font-size: 1.2em;
          font-weight: bold;
          margin-bottom: 10px;
        }
        .content-slot {
          display: none; /* 默认隐藏 */
          margin-top: 10px;
          border-top: 1px dashed #eee;
          padding-top: 10px;
        }
        .toggle-button {
          background-color: #007bff;
          color: white;
          border: none;
          padding: 8px 12px;
          border-radius: 4px;
          cursor: pointer;
          margin-top: 10px;
        }
        .toggle-button:hover {
          background-color: #0056b3;
        }
      </style>
      <div class="card">
        <div class="header-slot">
          <slot name="header"></slot>
        </div>
        <button class="toggle-button">展开/收起内容</button>
        <div class="content-slot">
          <slot name="content"></slot>
        </div>
      </div>
    `;
    this._contentSlot = shadowRoot.querySelector('slot[name="content"]');
    this._toggleButton = shadowRoot.querySelector('.toggle-button');
    this._contentContainer = shadowRoot.querySelector('.content-slot');

    this._toggleButton.addEventListener('click', this._toggleContent.bind(this));
  }

  connectedCallback() {
    // 组件连接到DOM后，可以检查插槽内容
    this._checkSlotContent();
  }

  _toggleContent() {
    const isHidden = this._contentContainer.style.display === 'none';
    this._contentContainer.style.display = isHidden ? 'block' : 'none';
    this._toggleButton.textContent = isHidden ? '收起内容' : '展开/收起内容';

    // 可以在这里对投射进来的内容做一些操作
    if (isHidden) {
      const contentElements = this._contentSlot.assignedElements();
      console.log('内容插槽中的元素：', contentElements);
      // 比如，找到所有段落并给它们加一个类
      contentElements.forEach(el => {
        if (el.tagName === 'P') {
          el.classList.add('highlighted-paragraph');
        }
      });
    } else {
      // 移除类
      this._contentSlot.assignedElements().forEach(el => {
        if (el.tagName === 'P') {
          el.classList.remove('highlighted-paragraph');
        }
      });
    }
  }

  _checkSlotContent() {
    const headerNodes = this.shadowRoot.querySelector('slot[name="header"]').assignedNodes();
    const contentNodes = this._contentSlot.assignedNodes();

    if (headerNodes.length === 0) {
      console.warn('警告：header 插槽没有内容！');
    }
    if (contentNodes.length === 0) {
      console.warn('警告：content 插槽没有内容！');
      this._toggleButton.disabled = true; // 如果没有内容，禁用按钮
      this._toggleButton.textContent = '无内容';
    }
  }
}
customElements.define('expandable-card', ExpandableCard);

index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>可展开卡片</title>
    <script src="expandable-card.js" defer></script>
    <style>
        body { font-family: sans-serif; }
        .highlighted-paragraph {
            background-color: #e6f7ff;
            border-left: 3px solid #1890ff;
            padding: 5px;
        }
    </style>
</head>
<body>
    <expandable-card>
        <h3 slot="header">关于 Web Components</h3>
        <p slot="content">Web Components 是一套浏览器原生的 API，允许你创建可复用的自定义元素。</p>
        <p slot="content">它们包括 Custom

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~