嵌套的 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 解釋器或此更新的文章。

編輯：不知道這是從哪里來的，規范沒有提到這個要求： https://html.spec.whatwg.org/multipage/dom.html#attr-slot

這里也沒有提到，這里也沒有提到。