angular：HtmlElement的子节点有Shadow dom时奇怪的现象

Cloud Flower2023-09-12 8:13

描述：

这样写时，会自动跳过shadow dom节点的遍历

TypeScript 复制代码

const cloneElement = this.contentElement.cloneNode(true) as HTMLElement;
for(let childNodeIndex = 0; childNodeIndex < cloneElement.childNodes.length; childNodeIndex++) {
    element.appendChild(cloneElement.childNodes[childNodeIndex] as HTMLElement);
}

或者使用cloneElement.childNodes.forEach遍历，也不会遍历到shadow dom节点

如果这样写：

会在appendChild shadow dom节点报错，提示不是一个HtmlElement，无法append

TypeScript 复制代码

const cloneElement = this.contentElement.cloneNode(true) as HTMLElement;
const childCount = cloneElement.childNodes.length;
for(let childNodeIndex = 0; childNodeIndex < childCount; childNodeIndex++) {
    element.appendChild(cloneElement.childNodes[childNodeIndex] as HTMLElement);
}