我有一个不带 Shadow DOM 的 HTML Web 组件,我尝试添加一个 Slot,但由于某些原因它不起作用。
我期望它能将 "Foo bar" 替换为 "Hello world",但实际上没有发生。
- Slot 只在使用 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>