在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) 的期望结构和客户端使用方式：

  
    
 
      {{entry.name}}
       
    
  

 
   
  Delete entire list? 

客户端使用时：

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

Web Component Slot机制的局限性

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

失败的尝试：直接使用Slot

基于上述理解，我们第一次尝试直接在多个位置放置同名的 ，结果正如预期：客户端传入的图标内容只会在Web Component模板中的第一个 位置渲染，而所有后续的同名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; // 引用所有需要插入内容的占位符

  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)); // 插入克隆节点
      });
    }
  }
}

  
    
 
       
      {{entry.name}}
    
  

 
   
  Delete entire list? 


 
  

解释失败原因： 这种方法也无法奏效，因为 元素本身并不“包含”客户端传入的DOM节点。 只是一个渲染指令，指示浏览器在何处显示被投射的内容。当浏览器将内容投射到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开发人员阅读，既是优秀的学习教程，也可用作参考手册。

下载

// 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; // 引用所有需要插入内容的占位符

  @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的模板将不再包含 ，而是使用普通的 或

  
    
 
       
      {{entry.name}}
    
  

 
   
  Delete entire list? 

   

   
     Potato 
     Chips