Question

我正在使用webcomponentsjs polyfill。没有x标签，聚合物等，优选香草JS。

克隆模板并将其附加到文档后，我无法再将其删除，因为它缺少一个parentNode。

var tmpl = document.getElementById('tmpl');
var clone = document.importNode(tmpl.content, true);
document.body.appendChild(clone);
console.log(clone.parentNode); // parentNode is null (not undefined!)
clone.parentNode.removeChild(clone); // fails!

You may see yourself in this jsbin

我的问题是：如何再次删除该元素。我错过了什么吗？

Answer 1

您正在混淆DocumentFragment与Node。 content的{{1}}显然是template的实例：

DocumentFragment

根据documentation，<template> <div>node 1</div> <p>node 2</p> etc </template>接受文档片段：

各种其他方法可以将文档片段作为参数（例如，任何节点接口方法，例如Node#appendChild和Node.appendChild），，在这种情况下，片段的子节点被追加或者插入，而不是片段本身。

那么，您期望成为文档片段的父级是什么？它显然是空的，因为实体“文档片段”在此上下文中是虚拟的。所以，要实现你想要的，你首先要创建一个容器，然后将节点附加到它/清理它的内容。

Node.insertBefore

有一种常见的方法来添加涉及ShadowDOM的模板内容：

<body>
  ...
  <div id='container'></div>
  ...
</body>

或不使用ShadowDOM，按原样插入：

var shadow = document.querySelector('#container').createShadowRoot();
shadow.appendChild(document.querySelector('#tmpl').content, true);

希望它有所帮助。

WebComponents：删除克隆的模板

1 个答案: