在lit-element中，如何从插槽元素引用插槽元素？
在lit-element中，如何从插槽元素引用插槽元素？
提问于 2019-05-26 17:19:20
我有一个名为'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;但是，有没有一种干净的方法来实现这一点呢？
回答 2
Stack Overflow用户
发布于 2019-05-28 02:30:09
我不知道这是否可以被认为是非常简单的，但您给出的场景表明您已经知道主机组件是堆栈项，并且该组件有一个类名为“slot -style”的插槽包装器。假设您可以获得这样的引用(这在组件和宿主文档中都有效)：
let slotElement = document.querySelector("stack-item").shadowRoot.querySelector(".slot-style");
//display width
console.log(slotElement.clientWidth);Stack Overflow用户
发布于 2019-05-28 16:44:26
this.shadowRoot.host等同于this。
所以你可以试试：
this.parentElement.shadowRoot.querySelector( 'div.slot-style' )页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56312212
复制相关文章
相似问题