如何在JS中获得slot内的元素

Question

我有一个关于插槽的问题

例子:

在page1.js

<div slot="slotName1">
<div class="header">
<div class="content">
content
</div>
</div>
</div>
<div slot="slotName2">
<div class="header">
<div class="content">
content
</div>
</div>
</div>

在page2.js

<div>
<slot name="slotName1"></slot>
<slot name="slotName2"></slot>
</div>

如何访问page2.js中的内容类元素，我确信槽是可用的，然后我在下面尝试它不适合我

const expanderT = this.shadowRoot.querySelector('slot[name="slotName1"]');
console.log('ex: ', expanderT.querySelector('content'));

Answer 1

槽元素并没有真正在DOM中移动，它们只是被浏览器呈现在相应的槽中。换句话说，有槽的元素仍然服从DOM的层次结构，这意味着您不能使用querySelector()从影子根访问它们，因为querySelector()遍历文档的标记。

你想要的是在HTMLSlotElement接口上的assignedElements()方法，它检索分配给一个slot元素实例的DOM元素列表。

在您的情况下，您将需要这样的内容:

const expanderT = this.shadowRoot.querySelector('slot[name="slotName1"]');
console.log('ex: ', expanderT.assignedElements()[0].querySelector('.content'));

你还错过了"content"前面的点。指示您正在选择具有类"content"的元素。如果没有点，它将尝试匹配标记名。