我正在创建一个带有 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 中创建模板的更好方法?
最佳答案
首先,这个调用是无效的:
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);
关于javascript - 在 javascript 中定义影子 DOM 模板,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25981255/