我试图弄清楚 Web 组件是如何工作的,但无法完全理解插槽中后备内容的规则:
我有一个网络组件,例如:
const template = document.createElement('template');
template.innerHTML = `
<slot name="content">
<span>fallback</span>
</slot>
<slot>
<span>fallback on an anonymus slot</span>
</slot>
<section>...and more content form shadow DOM</section>
`;
class SomeComponent extends HTMLElement{
constructor() {
super();
const shadowRoot = this.attachShadow({mode: 'open'});
shadowRoot.appendChild(template.content.cloneNode(true));
}
}
window.customElements.define('some-component', SomeComponent);
如果我把这个组件放在像这样的页面上
<some-component>
<span slot="content">named slot content</span>
</some-component>
我从未见过未命名插槽的“后备”内容:
但它确实存在于影子 DOM 中:
我不使用任何 pollyfills 并依赖当前的 Chrome 网络组件支持
最佳答案
这是预期的行为。
实际上,后备不应显示,因为某些元素被未命名的 <slot>
捕获并显示。元素:space
之前的(不可见的 CRLF
和 <span>
)文本元素和</span>
之后标签。
如果删除它们:
<some-component><span slot="content">named slot content</span></some-component>
...然后您将看到后备文本!
const template = document.createElement('template');
template.innerHTML = `
<slot name="content">
<span>fallback</span>
</slot>
<slot>
<span>fallback on an anonymus slot</span>
</slot>
<section>...and more content form shadow DOM</section>
`;
class SomeComponent extends HTMLElement{
constructor() {
super();
const shadowRoot = this.attachShadow({mode: 'open'});
shadowRoot.appendChild(template.content.cloneNode(true));
}
}
window.customElements.define('some-component', SomeComponent);
<some-component><span slot="content">named slot content</span></some-component>
关于javascript - "unnamed"插槽上的后备内容永远不会显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53182353/