在javascript中定义阴影DOM模板

我正在使用shadowdom创建一个元素，最终用于自定义元素。我的HTML文件已经有点臃肿了，因此理想情况下，我希望将所有模板移到java脚本中，而不是在HTML主体中引用模板

为此，我尝试了这种方法：

var template = document.createElement('template'),
   div = document.createElement('div');

div.textContent = 'foo';
template.appendChild(div);

var shadow = document.body.appendChild('div').createShadowRoot();

shadow.appendChild(template.content.cloneNode());

但是，这会引发NotFoundError。深入挖掘，它看起来像template.content只是定义为

#documentFragment

，这似乎可能是问题所在，但我对影子dom或模板了解不够，无法确定

我的代码中是否存在bug，或者是否有更好的方法在javascript中创建模板

---

首先，此呼叫无效：

document.body.appendChild('div')

为了装载阴影DOM，您需要DOM中的常规元素：

var mountingPoint = document.createElement('div');
document.body.appendChild(mountingPoint);

是包含名为

content

的文档片段的元素：

该接口对Web组件也很有用：元素的HTMLTemplateElement.content属性中包含DocumentFragment。（）

因此，您可以替换

template.appendChild（div）带有：

template.content.appendChild(div);

还要注意，对于Chrome，方法
cloneNode
的第一个参数
deep
必须是
true
，因为

但是您不需要
元素。直接使用创建的DIV：

var div = document.createElement('div');
div.textContent = 'foo';

var mountingPoint = document.createElement('div');
document.body.appendChild(mountingPoint);

var shadow = mountingPoint.attachShadow({mode: 'open'});
shadow.appendChild(div);

首先，此调用无效：

document.body.appendChild('div')

为了装载阴影DOM，您需要DOM中的常规元素：

var mountingPoint = document.createElement('div');
document.body.appendChild(mountingPoint);

是包含名为
content
的文档片段的元素：

该接口对Web组件也很有用：元素的HTMLTemplateElement.content属性中包含DocumentFragment。（）

因此，您可以替换
template.appendChild（div）带有：

template.content.appendChild(div);

还要注意，对于Chrome，方法
cloneNode
的第一个参数
deep
必须是
true
，因为

但是您不需要
元素。直接使用创建的DIV：

var div = document.createElement('div');
div.textContent = 'foo';

var mountingPoint = document.createElement('div');
document.body.appendChild(mountingPoint);

var shadow = mountingPoint.attachShadow({mode: 'open'});
shadow.appendChild(div);