如何解决Slots 在没有 shadow dom 的 html web 组件上不起作用
我有一个没有 shadow dom 的 html web 组件,我尝试添加一个插槽。由于某种原因它不起作用。
我希望它可以将“Foo bar”切换为“Hello world”,但这并没有发生。
- 插槽是否仅适用于 shadow dom 和模板?
- 我怎样才能让它工作?
class HelloWorld extends HTMLElement {
constructor() {
super();
}
connectedCallback() {
this.innerHTML = `
<div>
<slot name="element-name">Foo Bar</slot>
</div>
`;
}
}
customElements.define("hello-world",HelloWorld);
<hello-world>
<span slot="element-name">Hello World</span>
</hello-world>
解决方法
是的,<slot>
仅适用于 shadowDOM
开槽内容是反射 lightDOM 内容
见:::slotted CSS selector for nested children in shadowDOM slot
一个没有shadowDOM的Web组件只有innerHTML
如果您在这样的 Web 组件上执行 this.innerHTML=
,它替换 innerHTML
,就像在任何其他 HTML 标记上一样
使用 shadowDOM:
<hello-world>
<b slot="none">Mighty</b>
<span slot="title">Web Components</span>
Hello!
</hello-world>
<script>
customElements.define("hello-world",class extends HTMLElement {
constructor() {
super()
.attachShadow({mode:"open"})
.innerHTML = `<div><slot></slot><slot name="title">Foo Bar</slot></div>`;
this.onclick = (evt) => {
this.querySelector('b').slot="title";
};
}
});
</script>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。