Custom Elements 如何使用 slot-JavaScript中文网-JavaScript教程资源分享门户

前言

Custom Elements 是 Web Components 规范的重要组成部分，利用它可以将页面上的一坨坨复杂的 HTML 和 JavaScript 代码打造成为可复用、易维护的组件。在 Custom Elements 中，使用 slot 可以方便地进行组件的内容分发，从而达到更好的组件封装和表现力。接下来，我们将深入介绍 Custom Elements 如何使用 slot，希望对你有所帮助。

slot 的基础用法

slot 可以理解为“插槽”，用于向组件传递内容。我们可以在组件中定义 slot，比如下面这个简单的例子：

// javascriptcn.com 代码示例
<template id="my-custom-element">
  <style>
    :host {
      display: block;
      border: 1px solid black;
      padding: 10px;
    }
  </style>
  <h2><slot name="title">Custom Element</slot></h2>
  <p><slot name="content">Hello, World!</slot></p>
</template>

这里的 template 标签中定义了一个自定义元素 my-custom-element，其中有两个 slot，分别为 title 和 content。其中，name 属性指定了 slot 的名称。每个 slot 中包含的内容即为默认内容，如果在使用该组件的时候没有传递内容，则使用默认内容。

接下来的 JavaScript 代码将该模板转换为一个 custom element：

// javascriptcn.com 代码示例
class MyCustomElement extends HTMLElement {
  constructor() {
    super();
    const shadowRoot = this.attachShadow({ mode: 'open' });
    const template = document.querySelector('#my-custom-element');
    shadowRoot.appendChild(template.content.cloneNode(true));
  }
}

customElements.define('my-custom-element', MyCustomElement);

这里使用了 attachShadow 方法将 Shadow DOM 附加到自定义元素上，并将模板内容克隆到 Shadow DOM 中。现在，我们就可以在 HTML 中使用自定义元素，并传递内容到 slot 中：

<my-custom-element>
  <div slot="title">Welcome to my website!</div>
  <div slot="content">This is a demo of how to use custom elements with slot.</div>
</my-custom-element>

如此一来，我们就可以看到我们定义的 title 和 content 已经被成功地渲染出来了。

slot 的进阶

上面的例子只是 slot 的最基本用法，但是在实际开发中，我们还可以运用一些高级技巧来更好地利用 slot。

具名 slot

具名 slot 允许我们通过名称来匹配 slot 和传递的内容，从而达到更好的组件解耦性。实现方法和基本使用方式与上面相同，只需要传递 name 属性就行了。

<template id="my-custom-element">
  <h2><slot name="title">Custom Element</slot></h2>
  <p><slot name="content">Hello, World!</slot></p>
  <footer><slot name="footer"></slot></footer>
</template>

在 HTML 中的使用方式：

<my-custom-element>
  <div slot="title">Welcome to my website!</div>
  <div slot="content">This is a demo of how to use custom elements with slot.</div>
  <div slot="footer">Thank you for your visit!</div>
</my-custom-element>

默认 slot

在有多个 slot 的情况下，我们可以将某个 slot 设为默认 slot，从而在使用的时候省略掉 slot 名称。实现方法非常简单，只需要不加 name 属性即可。

<template id="my-custom-element">
  <div><slot></slot></div>
</template>

在 HTML 中的使用方式：

<my-custom-element>
  This will be rendered as the default slot.
</my-custom-element>

slot 元素的样式

我们可以使用 ::slotted 伪类来定义 slot 元素的样式。不过需要注意的是，这种方式只能够定义 slot 内容的样式，而无法影响到 slot 所在的 shadow DOM。要想影响到 shadow DOM，还需要使用 /deep/ 或 >>> 选择器，这里不再赘述。下面是一个样例代码：

::slotted(span) {
  color: red;
}

表示为 slot 中传递的所有 span 元素添加红色字体样式。

总结

Custom Elements 是 Web Components 中的重要组成部分，能够有效提升组件的复用性和维护性。使用 slot 可以轻松实现组件内容的分发，极大地增强了 Custom Elements 的表现力。本文介绍了 slot 的基础用法和进阶应用，希望对你有所帮助。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/654c32a77d4982a6eb5d0101