Web Component-自定义元素的生命周期

最新推荐文章于 2023-12-24 21:27:13 发布

东方睡衣

最新推荐文章于 2023-12-24 21:27:13 发布

阅读量364

点赞数 1

文章标签：前端 java javascript

本文链接：https://blog.csdn.net/web2022050903/article/details/125530391

版权

在之前大概了解了 Web Component，知道是怎么玩的，不过在查阅资料后发现之前有些错误

在之前，使用的是template.content.cloneNode(true);来创建出一个新的节点，这种方法有一些局限性：会复制原节点的所有属性及属性值，其中就包括id，这样页面中就有多个id一样的元素了

拷贝它所有的属性以及属性值,当然也就包括了属性上绑定的事件(比如 οnclick=“alert(1)”),但不会拷贝那些使用 addEventListener()方法或者 node.onclick = fn 这种用 JavaScript 动态绑定的事件. --mdn

MDN 同样也给出警告

注意:为了防止一个文档中出现两个 ID 重复的元素,使用 cloneNode()方法克隆的节点在需要时应该指定另外一个与原 ID 值不同的 ID

而且，生成的节点的ownerDocument仍然指向源节点的ownerDocument

既然这个方法有一定的局限性，那么有没有更好的方法呢？有的！

document.importNode将外部文档的一个节点拷贝一份,然后可以把这个拷贝的节点插入到当前文档中

使用方式

// deep参数表示是否递归复制源节点的所有子节点
const node = document.importNode(externalNode, deep);

注意：

新生成节点的 parentNode 是 null，因为它还没有插入当前文档的文档树中，属于游离状态，因此无法对其进行操作

这样的话我们就可以很方便的修

关注