嵌套 HTML 元素未分配给插槽

Question

在下面的代码中，我试图将 <span slot='test-slot'>b</span> 分配给 <slot name='test-slot'>a</slot>，但分配不起作用。如果我将 <span slot='test-slot'>b</span> 带出其父 <div> 容器，分配确实会按预期进行。

这是为什么？无论如何，您可以使用 slot 元素从嵌套元素进行分配吗？如果没有，还有其他选择吗？这显然是一个简化的测试用例，但在我的真实 Web 组件中，用户在其他容器中添加带有 slot 标签的元素要直观得多。

<test-element>
  <div>
    <span slot='test-slot'>b</span>
  </div>
</test-element>

<template id='template-test-element'>
    <slot name='test-slot'>non slotted content</slot>
</template>

<script>
  class TestElement extends HTMLElement {
    constructor() {
      let template = document.getElementById("template-test-element")
                             .content.cloneNode(true);
      // Initialise shadow root and attach table template
      super() // sets AND return 'this' scope
        .attachShadow({mode:"open"}) // sets AND returns shadowRoot
        .append(template);
    }
  }

  customElements.define('test-element', TestElement);
</script>

Answer 1

命名插槽只接受具有匹配 slot 属性的顶级子项。

看到这个（旧）Polymer explainer or this more recent article。

编辑：虽然不确定这是从哪里来的，规范没有提到这个要求：https://html.spec.whatwg.org/multipage/dom.html#attr-slot

也没有提到here nor here。

嵌套 HTML 元素未分配给插槽

Nested HTML element not assigning to slot

html

javascript

web-component

shadow-dom

native-web-component