永远不会显示“未命名”广告位上的后备内容

Question

我试图弄清楚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中：

我不使用任何填充物，而是依靠当前的Chrome Web组件支持

Answer 1

这是预期的行为。 实际上，由于某些元素被未命名的<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>