永远不会显示“未命名”插槽上的后备内容答案

【问题标题】：Fallback content on an "unnamed" slot is never displayed永远不会显示“未命名”插槽上的后备内容
【发布时间】：2019-04-10 11:06:48
【问题描述】：

我正试图弄清楚 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 网络组件支持

【问题讨论】：

标签： javascript web-component shadow-dom custom-element html5-template

【解决方案1】：

这是预期的行为。实际上不应该显示后备，因为一些元素被未命名的<slot> 元素捕获和显示：<span> 之前和</span> 标记之后的（不可见的space 和CRLF）文本元素。

如果你删除它们：

<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);

&lt;some-component&gt;&lt;span slot="content"&gt;named slot content&lt;/span&gt;&lt;/some-component&gt;

【讨论】：