如何解决<template/>和Shadow Dom一起使用时为什么需要使用cloneNode 没有 cloneNode 的代码使用 cloneNode 的代码
我一直在查看有关 Web 组件的 mdn 文档,我点击了链接,然后我到达了有关模板下方的文档,该链接就是我正在查找的内容。
根据文件
它说如果我不使用 cloneNode 附加节点?模板的内部样式将不起作用。但是我尝试使用 cloneNode 追加和追加,但两个测试都是相同的....所以我有一个问题,我是否想念理解或规范更改以支持两者?我在 chrome 、 safari 中测试了两个浏览器
没有 cloneNode 的代码
<template id="my-paragraph">
<style>
p {
color: white;
background-color: #666;
padding: 5px;
}
</style>
<p>My paragraph</p>
</template>
<my-paragraph></my-paragraph>
<script>
customElements.define('my-paragraph',class extends HTMLElement {
constructor() {
super();
let template = document.getElementById('my-paragraph');
let templateContent = template.content;
const shadowRoot = this.attachShadow({
mode: 'open'
})
var style = document.createElement('style');
style.textContent = `
p{
font-size: 30px;
color:'black';
}`;
shadowRoot.appendChild(style)
console.log(template)
shadowRoot.appendChild(templateContent);
}
}
);
</script>
使用 cloneNode 的代码
<template id="my-paragraph">
<style>
p {
color: white;
background-color: #666;
padding: 5px;
}
</style>
<p>My paragraph</p>
</template>
<my-paragraph></my-paragraph>
<script>
customElements.define('my-paragraph',class extends HTMLElement {
constructor() {
super();
let template = document.getElementById('my-paragraph');
let templateContent = template.content;
const shadowRoot = this.attachShadow({
mode: 'open'
})
var style = document.createElement('style');
style.textContent = `
p{
font-size: 30px;
color:'black';
}`;
shadowRoot.appendChild(style)
console.log(template)
shadowRoot.appendChild(templateContent.cloneNode(true));
}
}
);
</script>
https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_templates_and_slots
解决方法
.content
移动内容,.content.cloneNode(true)
对 <template>
请参阅下面的 SO 片段; 3rd <my-paragraph>
无法从 <template>
获取任何内容,因为 2nd <my-paragraph>
移动了所有模板到其 <my-paragraph>
shadowDOM
<template id="MY-PARAGRAPH">
<style>
p {
background: lightgreen;
padding: 5px;
}
</style>
<p><slot></slot></p>
</template>
<my-paragraph cloned>Cloned Content</my-paragraph>
<my-paragraph>Content only</my-paragraph>
<my-paragraph>Content only</my-paragraph>
<script>
customElements.define('my-paragraph',class extends HTMLElement {
constructor() {
// yes you can place javascript BEFORE the super() call,the docs are wrong
const template = () => {
let content = document.getElementById(this.nodeName).content;
if (content.children.length) {
if (this.hasAttribute("cloned"))
return content.cloneNode(true)
else
return content;
} else {
document.body.append(`content in template: `,this.nodeName);
}
}
super() // sets AND returns this-Scope
.attachShadow({mode: 'open'}) // sets AND returns this.shadowRoot
.append(template()) // no need for appendChild if you don't use its return value
}
}
);
</script>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。