Polymer 如何从lit元素中的插槽元素引用插槽元素？

我有一个名为“stack item”的组件，它有一个插槽，它的html如下所示

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

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

---

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

我不知道这是否可以被认为是非常简单的，但是您给出的场景表明您已经知道主机组件是堆栈项，并且该组件有一个类名为“slot style”的插槽包装器。假设您可以获得这样的引用（这在组件和宿主文档中都有效）：

---

this.shadowRoot.host

相当于

this

所以你可以试试：

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

---

通过上面的行，你能到达元素吗？是的，我能到达@HakanCI tested，但不行，我不能：（@HakanC你需要将句柄更改与上下文this.handleChange.bind（this）绑定。我喜欢基于事件的方法来获取插槽。我会尝试一下。你是对的：）谢谢@Supersharp，有时这个组件（'other-component'））将从堆栈项的外侧调用。我正在搜索一个常见的解决方案。我现在做的是在litelement this.clientWidth=this.getBoundingClientRect（）.width的“firstUpdated”生命周期钩子中添加此代码；因此，这将使用实际宽度再次触发渲染函数。

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

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