如何从lit-element中的开槽元素引用开槽元素？

Question

我有一个名为'stack-item'的组件，该组件有一个插槽，其html看起来像这样

<div>
<div>1<div>
<div class='slot-style'><slot></slot></div>
</div>

我已经像这样使用了这个组件

<stack-item>
   <another-component></another-component>
</stack-item>

如何从“另一个组件”中获取class ='slot-style'的元素引用以计算插槽宽度和其他属性？

我写了一个解决方法

let slotElement =this.shadowRoot.host.parentElement.shadowRoot.querySelector('slot').parentElement;

但是有没有一种干净的方法来实现这一目标？

Answer 1

我不知道这是否可以被认为非常简单，但是您给出的情况表明您已经知道主机组件是堆栈项，并且该组件具有插槽包装，其类名为“插槽样式”。鉴于您可以获得这样的参考（这在组件以及宿主文档中均有效）：

let slotElement = document.querySelector("stack-item").shadowRoot.querySelector(".slot-style");
//display width
console.log(slotElement.clientWidth);

Answer 2

this.shadowRoot.host等效于this。

因此您可以尝试：

this.parentElement.shadowRoot.querySelector( 'div.slot-style' )