创造被命名的插槽 Custom Elements

在前端开发中，我们常常需要使用自定义的 HTML 元素来实现一些特定的功能。为了方便使用和维护，我们可以使用 Custom Elements API 来创建自定义元素。而在这些自定义元素中，我们也可以使用被命名的插槽来实现更加灵活的内容分发。

Custom Elements API

Custom Elements API 是一个由 W3C 制定的 Web 标准，它提供了一种创建自定义元素的方式。通过 Custom Elements API，我们可以使用 JavaScript 来定义一个自定义元素，并且可以在 HTML 中使用它。

class MyElement extends HTMLElement {
  constructor() {
    super();
    // ...
  }
}

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

在上面的代码中，我们定义了一个名为 MyElement 的自定义元素，并且使用 customElements.define() 方法将其注册为 my-element。这样，在 HTML 中我们就可以使用这个自定义元素了。

<my-element></my-element>

被命名的插槽

被命名的插槽是指在自定义元素中，我们可以使用 <slot> 元素来定义一个插槽，然后在使用该自定义元素时，可以在插槽中插入任意内容。而且，我们还可以为插槽指定一个名称，以实现多个插槽的分发。

<my-element>
  <div slot="header">Header</div>
  <div slot="content">Content</div>
  <div slot="footer">Footer</div>
</my-element>

在上面的代码中，我们定义了一个名为 my-element 的自定义元素，并且在其中使用了三个被命名的插槽，分别为 header、content 和 footer。当我们在 HTML 中使用这个自定义元素时，可以在插槽中插入任意内容。

<my-element>
  <h1 slot="header">Title</h1>
  <p slot="content">Content</p>
  <button slot="footer">OK</button>
</my-element>

在上面的代码中，我们使用了 my-element 自定义元素，并且在三个被命名的插槽中插入了不同的内容。这样，在页面中就可以灵活地分发内容了。

示例代码

下面是一个完整的示例代码，演示了如何使用 Custom Elements API 和被命名的插槽来创建一个自定义元素。

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Custom Elements</title>
</head>
<body>
  <my-element>
    <h1 slot="header">Title</h1>
    <p slot="content">Content</p>
    <button slot="footer">OK</button>
  </my-element>
  <script>
    class MyElement extends HTMLElement {
      constructor() {
        super();
        const shadow = this.attachShadow({ mode: 'open' });
        const template = document.createElement('template');
        template.innerHTML = `
          <style>
            :host {
              display: block;
              border: 1px solid #ccc;
              margin: 10px;
              padding: 10px;
            }
            ::slotted([slot="header"]) {
              font-size: 24px;
              font-weight: bold;
            }
            ::slotted([slot="content"]) {
              font-size: 16px;
            }
            ::slotted([slot="footer"]) {
              border: 1px solid #ccc;
              padding: 5px 10px;
              background-color: #eee;
            }
          </style>
          <slot name="header"></slot>
          <slot name="content"></slot>
          <slot name="footer"></slot>
        `;
        shadow.appendChild(template.content.cloneNode(true));
      }
    }

    customElements.define('my-element', MyElement);
  </script>
</body>
</html>

在上面的代码中，我们定义了一个名为 MyElement 的自定义元素，并且为它定义了三个被命名的插槽，分别为 header、content 和 footer。在自定义元素的构造函数中，我们创建了一个 Shadow DOM，并且为其添加了一个包含样式和插槽的模板。这样，在使用该自定义元素时，就可以根据需要在插槽中插入不同的内容了。

Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67d34e9fa941bf713463ea81