"unnamed" 插槽上的后备内容从不显示
Fallback content on an "unnamed" slot is never displayed
我正在尝试了解 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>
我从来没有看到未命名插槽的 "fallback" 内容:
但它确实存在于阴影中 DOM:
我不使用任何 pollyfills 并依赖当前的 Chrome 网络组件支持
这是预期的行为。
实际上回退应该不会显示,因为一些元素被未命名的 <slot>
元素捕获和显示:<span>
之前和之后的(不可见的 space
和 CRLF
)文本元素</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>
我正在尝试了解 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>
我从来没有看到未命名插槽的 "fallback" 内容:
但它确实存在于阴影中 DOM:
我不使用任何 pollyfills 并依赖当前的 Chrome 网络组件支持
这是预期的行为。
实际上回退应该不会显示,因为一些元素被未命名的 <slot>
元素捕获和显示:<span>
之前和之后的(不可见的 space
和 CRLF
)文本元素</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>