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);
}
相关推荐
草梅友仁2 小时前
草梅 Auth 1.6.0 发布密码强度组件 Twilio 短信支持 | 2025 年第 36 周草梅周报
前端·开源·github
正义的大古2 小时前
OpenLayers常用控件 -- 章节七:测量工具控件教程
前端·javascript·vue.js·openlayers
Hashan2 小时前
深入理解:Webpack编译原理
前端·webpack
雲墨款哥3 小时前
一个前端开发者的救赎之路-JS基础回顾(五)-数组
前端·javascript·面试
朱程3 小时前
深入JS(一):手写 Promise
前端·javascript
Hierifer3 小时前
跨端技术:浅聊双线程原理和实现
前端
FreeBuf_3 小时前
加密货币武器化:恶意npm包利用以太坊智能合约实现隐蔽通信
前端·npm·智能合约
java水泥工4 小时前
基于Echarts+HTML5可视化数据大屏展示-图书馆大屏看板
前端·echarts·html5
EndingCoder4 小时前
Electron 性能优化:内存管理和渲染效率
javascript·性能优化·electron·前端框架
半夏陌离4 小时前
SQL 实战指南:电商订单数据分析(订单 / 用户 / 商品表关联 + 统计需求)
java·大数据·前端