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

标签 javascript shadow-dom

我正在创建一个带有 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.

最佳答案

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

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/

相关文章:

javascript - 为什么我可以调用影子 dom 中的函数?

vuejs3 - Vue 3 : disable shadow dom while using custom element

javascript - 使用 CSS 定位鼠标单击的左/右或顶部/底部

javascript - jquery 不工作 onclick

javascript - 为什么我们必须在 require.js 中加载 data-main 两次?

javascript - 使用 document.addEventListener 通过 JavaScript 检测 IE8

javascript - 阴影根 : is there a way to include an external javascript file into a shadow-root?

自定义元素中的 polymer 英雄过渡

Angular 7 + ShadowDOM - @angular/material 皮肤的加载策略

javascript - 尝试包含时的 jQuery UI 对话框问题