我有一个名为'stack-item‘的组件,它有一个槽,它的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;
但是,有没有一种干净的方法来实现这一点呢?
发布于 2019-05-28 02:30:09
我不知道这是否可以被认为是非常简单的,但您给出的场景表明您已经知道主机组件是堆栈项,并且该组件有一个类名为“slot -style”的插槽包装器。假设您可以获得这样的引用(这在组件和宿主文档中都有效):
let slotElement = document.querySelector("stack-item").shadowRoot.querySelector(".slot-style");
//display width
console.log(slotElement.clientWidth);
发布于 2019-05-28 16:44:26
this.shadowRoot.host
等同于this
。
所以你可以试试:
this.parentElement.shadowRoot.querySelector( 'div.slot-style' )
https://stackoverflow.com/questions/56312212
复制相似问题