Question

我创建了一个带阴影dom的元素，最终用于自定义元素。我的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或模板的了解还不够。

我的代码中是否存在错误或在javascript中创建模板的更好方法？

Here is my test fiddle.

Answer 1

首先，此调用无效：

document.body.appendChild('div')

您需要DOM中的常规元素才能安装影子DOM：

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

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

此界面也非常适用于Web组件：＆lt; template＆gt; elements在其HTMLTemplateElement.content属性中包含DocumentFragment。（Source: MDN）

因此，您可以将template.appendChild(div);替换为：

template.content.appendChild(div);

另请注意，使用Chrome时，方法deep的第一个参数cloneNode必须为true，因为default is false。

template.content.cloneNode(true);

但是你不需要<template>元素。直接使用创建的DIV：

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

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

var shadow = mountingPoint.createShadowRoot();
shadow.appendChild(div);

在javascript中定义shadow DOM模板

1 个答案: