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

Question

我有一个名为“stack-item”的组件，它有一个 slot，它的 html 看起来像这样

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

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

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

从'another-component'我如何获得class ='slot-style'的元素参考来计算槽宽度和其他属性？

我写了一个解决方法

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

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

score 1 · Accepted Answer

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

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

score 0 · Accepted Answer

this.shadowRoot.host相当于this。

所以你可以尝试：

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

2 回答 2