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

描述:

这样写时,会自动跳过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);
}
相关推荐
梨想橙汁17 分钟前
Webpack 快速上手:前端工程化、打包原理、从零搭建基础项目
前端·webpack·前端工程化
zhanghaha131421 分钟前
HTML系列教程:12_HTML 表格 <table> 零基础详解
前端·html
Betterme25 分钟前
Vue3 竞态请求防护组合式hooks:useLatestRequest 设计思路
前端
_zhourui_h_28 分钟前
一个 [ECS] 到底生成了多少代码?EasyECS 最核心的秘密都在这里
前端
梨想橙汁30 分钟前
Git 分支详解:创建切换、合并分支、冲突解决实战
前端·git
雪芽蓝域zzs32 分钟前
Vue3 defineProps` / `defineEmits` 是编译器宏,不需要手动 import 导入
前端·javascript·vue.js
whyweplay36 分钟前
Elpis:从Json Schema 到 页面
前端·javascript
大牧师1 小时前
Nest.js 微服务入门教程
开发语言·javascript·后端·微服务·node.js·nest.js·nest
做萤石二次开发的哈哈1 小时前
海康班班通交互一体机技能接入实战:ISAPI透传+OTAP双协议封装,Web/App/小程序教学管理应用一站生成
前端·物联网·小程序·交互·萤石开放平台·蓝海aiot一站式工作台·aiot开发
计算机魔术师1 小时前
Anthropic一次性锁死十年算力,5170亿美元买什么
前端