在Web Component中实现Slot内容的多次渲染：挑战与解决方案-js教程-PHP中文网

在Web Component中实现Slot内容的多次渲染：挑战与解决方案

本文探讨了web component中将slot内容渲染到多个位置的挑战。原生slot机制不支持此功能，因为内容会被移动而非复制。文章详细分析了直接使用slot和通过javascript克隆slot内容的失败尝试，并提供了一种通过angular elements和`@input`属性传递htmlelement的编程 workaround，同时深入剖析了该方案在性能、代码复杂性等方面的局限性。

引言：Web Component中Slot多重渲染的挑战

在开发可复用的Web Component时，我们经常需要允许客户端通过Slot（插槽）传入自定义内容，以实现灵活的UI定制。一个常见的需求是，将客户端传入的同一段内容（例如一个图标）渲染到Web Component模板中的多个位置。例如，在一个包含列表和按钮的组件中，我们可能希望同一个“删除”图标既出现在列表的每个条目旁，也出现在一个全局的删除按钮中。

考虑以下Web Component (my-awesome-webcomponent) 的期望结构和客户端使用方式：

<!-- my-awesome-webcomponent.html -->
<ul>
  <ng-container *ngFor="let entry of entries">
    <li> 
      {{entry.name}}
      <slot name="icon-delete"></slot> <!-- 期望此处显示删除图标 -->
    </li>
  </ng-container>
</ul>
<button> 
  <slot name="icon-delete"></slot> <!-- 期望此处也显示删除图标 -->
  Delete entire list? 
</button>

登录后复制

客户端使用时：

<!-- Client using webcomponent - HTML -->
<my-awesome-webcomponent>
  <span slot="icon-delete" class="my-icon-css-class"></span> <!-- 客户端传入的图标内容 -->
</my-awesome-webcomponent>

登录后复制

在这种设想中，如果列表有 n 个条目，Web Component内部将有 n+1 处需要渲染 <span slot="icon-delete" ...></span> 这个图标。然而，Web Component的原生Slot机制并非为此设计。

Web Component Slot机制的局限性

Web Component的Slot机制，其核心理念是将“投射内容”（projected content）从宿主元素（host element）移动到Shadow DOM中的Slot位置。这意味着，客户端传入的DOM节点并不会被复制，而是被“重新定位”到第一个匹配的 <slot> 元素处。因此，如果模板中存在多个同名的 <slot> 元素，只有第一个 <slot> 会接收并渲染该内容，后续的同名 <slot> 将保持为空。这是Web Component规范的固有行为，而非缺陷。

失败的尝试：直接使用Slot

基于上述理解，我们第一次尝试直接在多个位置放置同名的 <slot name="icon-delete"></slot>，结果正如预期：客户端传入的图标内容只会在Web Component模板中的第一个 <slot name="icon-delete"></slot> 位置渲染，而所有后续的同名Slot都会被忽略，无法显示内容。这直接证明了原生Slot机制不支持内容的多次渲染。

失败的尝试：通过JavaScript克隆Slot内容

鉴于原生Slot的限制，第二次尝试是希望通过JavaScript来动态获取Slot的内容，然后手动克隆并插入到所有需要的位置。

以下是一个基于Angular Elements的尝试示例：

// app-slot-example.ts (Web Component 内部逻辑)
import { Component, ViewChild, ViewChildren, ElementRef, QueryList, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-slot-example',
  templateUrl: './slot-example.component.html',
  styleUrls: ['./slot-example.component.scss'],
  encapsulation: ViewEncapsulation.ShadowDom,
})
export class SlotExampleComponent {
  @ViewChild('icon') icon!: ElementRef; // 引用承载slot的元素
  @ViewChildren('placeholder') placeholders!: QueryList<any>; // 引用所有需要插入内容的占位符

  entries = [
    { name: "bla1" }, { name: "bla2" }, { name: "bla3" }, { name: "bla4" },
  ];

  // 监听slot内容变化事件
  onSlotChange(): void {
    console.log("SLOT CHANGED");
    this.setIconHTML();
  }

  private setIconHTML(): void {
    // 尝试获取slot内容并克隆
    // 问题在于：this.icon.nativeElement.childNodes[0] 此时可能为空或不是期望的内容
    const iconNode: HTMLElement = this.icon.nativeElement.childNodes[0]?.cloneNode(true) as HTMLElement; 
    console.log(iconNode);

    if (iconNode) {
      this.placeholders.forEach(node => {
        const placeholderElement = node.nativeElement;
        // 先清空占位符，避免重复添加
        placeholderElement.innerHTML = ''; 
        placeholderElement.appendChild(iconNode.cloneNode(true)); // 插入克隆节点
      });
    }
  }
}

登录后复制

<!-- app-slot-example.html (Web Component 模板) -->
<ul>
  <ng-container *ngFor="let entry of entries">
    <li> 
      <span #placeholder></span> <!-- 占位符1 -->
      {{entry.name}}
    </li>
  </ng-container>
</ul>
<button> 
  <span #placeholder></span> <!-- 占位符2 -->
  Delete entire list? 
</button>

<span #icon style="display: none;"> <!-- 隐藏的span，用于承载实际的slot -->
  <slot (slotchange)="onSlotChange()" name="icon-delete"></slot>
</span>

登录后复制

解释失败原因： 这种方法也无法奏效，因为 <slot> 元素本身并不“包含”客户端传入的DOM节点。<slot> 只是一个渲染指令，指示浏览器在何处显示被投射的内容。当浏览器将内容投射到Slot时，它实际上是改变了被投射节点在DOM树中的位置，而不是将其复制到Slot的子节点中。因此，通过 this.icon.nativeElement.childNodes[0] 尝试访问Slot内部的DOM节点，通常会发现其为空或者不是预期的内容，因为实际的DOM节点已经被移动并渲染到页面上，但并非作为Slot元素的子节点存在。

替代方案：通过@Input属性传递HTMLElement

既然原生Slot和JavaScript克隆都无法直接解决问题，我们可以考虑一种编程上的替代方案：不使用Slot来传递要重复渲染的内容，而是将整个HTML元素作为Angular Web Component的 @Input 属性进行传递。这种方法虽然有效，但存在一些明显的局限性。

Web Component内部实现

首先，Web Component的Angular组件需要修改为通过 @Input 接收一个 HTMLElement 对象。

PHP与MySQL程序设计3

本书是全面讲述PHP与MySQL的经典之作，书中不但全面介绍了两种技术的核心特性，还讲解了如何高效地结合这两种技术构建健壮的数据驱动的应用程序。本书涵盖了两种技术新版本中出现的最新特性，书中大量实际的示例和深入的分析均来自于作者在这方面多年的专业经验，可用于解决开发者在实际中所面临的各种挑战。本书内容全面深入，适合各层次PHP和MySQL开发人员阅读，既是优秀的学习教程，也可用作参考手册。

253

查看详情

// Webcomponent.ts (Web Component 内部逻辑)
import { Component, Input, ViewChildren, ElementRef, QueryList, OnChanges, SimpleChanges } from '@angular/core';

@Component({
  selector: 'web-slot', // 假设这是你的Web Component选择器
  templateUrl: './webcomponent.html',
  // 注意：此处可能需要 ViewEncapsulation.ShadowDom
})
export class ExampleComponent implements OnChanges {
  @ViewChildren('placeholder') placeholders!: QueryList<any>; // 引用所有需要插入内容的占位符

  @Input() iconInput!: HTMLElement; // 通过Input接收HTMLElement

  // 监听Input属性变化
  ngOnChanges(changes: SimpleChanges): void {
    if (changes['iconInput'] && this.iconInput) {
      console.log("INPUT CHANGED");
      this.setIconHTML();
    }
  }

  private setIconHTML(): void {
    this.placeholders.forEach(node => {
      const placeholderElement: HTMLElement = node.nativeElement;
      placeholderElement.innerHTML = ""; // 重置占位符内容，避免重复添加
      const iconElementClone = this.iconInput.cloneNode(true) as HTMLElement; // 克隆传入的元素
      placeholderElement.appendChild(iconElementClone); // 插入克隆节点
    });
  }
}

登录后复制

Web Component的模板将不再包含 <slot>，而是使用普通的 <span> 或 <div> 作为占位符：

<!-- webcomponent.html (Web Component 模板) -->
<ul>
  <ng-container *ngFor="let entry of entries">
    <li> 
      <span #placeholder></span> <!-- 占位符1 -->
      {{entry.name}}
    </li>
  </ng-container>
</ul>
<button> 
  <span #placeholder></span> <!-- 占位符2 -->
  Delete entire list? 
</button>

登录后复制

客户端使用示例

客户端在使用这个Web Component时，需要通过JavaScript获取到要传递的HTML元素，然后将其赋值给Web Component实例的 iconInput 属性。

<!-- client.html (客户端页面) -->
<body>
  <web-slot></web-slot> <!-- 你的Web Component实例 -->

  <span style="display: none;"> <!-- 定义要传入的图标，并隐藏 -->
    <span id="icon1"> Potato </span>
    <span id="icon2"> Chips </span>
  </span>

  <script>
    const slotElement = document.querySelector('web-slot');

    // 由于Web Component的初始化需要时间，我们需要等待其准备就绪
    // 才能正确设置其@Input属性。
    setTimeout(() => {
      const newIconElement = document.querySelector('#icon1');
      if (slotElement && newIconElement) {
        slotElement.iconInput = newIconElement; // 将HTMLElement赋值给Input
      }
    }, 20); // 20ms的延迟通常足够确保Web Component已准备好接收输入

    // 模拟客户端在某些状态变化下更换图标
    setTimeout(() => {
      const newIconElement = document.querySelector('#icon2');
      if (slotElement && newIconElement) {
        slotElement.iconInput = newIconElement;
      }
    }, 2000); 
  </script>
</body>

登录后复制

该方案的局限性与注意事项

尽管上述 @Input 方案能够实现Slot内容的多次渲染，但它存在以下几个明显的局限性，需要开发者仔细权衡：

性能延迟：
- Web Component（尤其是基于Angular Elements的组件）的初始化需要一定时间。客户端无法立即将 HTMLElement 赋值给 @Input 属性，而需要等待组件完全准备就绪。
- 为了确保组件准备就绪，客户端代码中通常需要引入 setTimeout 等延迟机制。这种延迟虽然可能很短（例如20毫秒），但对于用户而言，可能会察觉到图标加载的轻微延迟，影响用户体验。
API使用复杂性：
- 此方案要求开发者在客户端代码中大量使用原生JavaScript的DOM API（如 document.querySelector、setTimeout 等），来获取并传递 HTMLElement。
- 这与Angular通常抽象DOM操作的理念相悖，使得代码风格不统一，降低了“Angular-idiomatic”的开发体验。
数据传递不便：
- 通过 @Input 传递 HTMLElement 本身，相比于声明式的Slot机制，显得更为繁琐和不直观。
- 强制性的 setTimeout 模式增加了样板代码，使得数据传递过程变得复杂且容易出错。
设计理念冲突：
- 核心问题在于，Web Component的Slot并非设计用于内容的复用。它旨在将一段内容投射到Shadow DOM的某个特定位置。
- 如果需要复用内容，更符合Web Component或组件化开发理念的做法是：
  - 传递数据而非DOM节点：让Web Component内部根据传入的数据（如图标名称、URL等）自行渲染图标。
  - 传递模板引用：在某些框架（如Angular）中，可以传递 TemplateRef，但这通常局限于同一框架内的组件通信，不适用于通用的Web Component。
  - 重新评估设计：如果一个组件需要多次显示同一段复杂HTML，可能需要重新考虑组件的职责划分，或者将该可复用内容封装成一个独立的子组件。

总结

Web Component的原生Slot机制不支持将同一段投射内容渲染到多个位置。无论是直接使用多个同名Slot，还是尝试通过JavaScript克隆Slot内容，都无法实现这一目标。

虽然通过将 HTMLElement 作为 @Input 属性传递给Angular Web Component可以实现内容的多处渲染，但这是一种带有明显局限性的编程 workaround。它引入了性能延迟、增加了客户端代码的复杂性，并与Web Component Slot的设计初衷相悖。在实际项目中，开发者应仔细权衡这些利弊，并考虑是否可以通过调整组件设计（例如传递数据而非DOM节点）来更优雅地解决内容复用问题。

以上就是在Web Component中实现Slot内容的多次渲染：挑战与解决方案的详细内容，更多请关注php中文网其它相关文章！