javascript - 在 javascript 中定义影子 DOM 模板

Question

我正在创建一个带有 shadow 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，这似乎是问题所在，但我对 shadow dom 或模板的了解还不够，无法确定。

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

Here is my test fiddle.

Answer 1

首先，这个调用是无效的:

document.body.appendChild('div')

为了挂载影子 DOM，您需要 DOM 中的常规元素:

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

A <template>是一个包含名为 content 的文档片段的元素:

This interface is also of great use with Web components: <template> elements contains a DocumentFragment in their HTMLTemplateElement.content property. (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.attachShadow({mode: 'open'});
shadow.appendChild(div);