Как ссылаться на элемент слота из его щелевого элемента в 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>

От'another-component' как получить ссылку на элемент для class = 'slot-style' для вычисления ширины слота и других свойств?

Я написал обходной путь

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

, ноЕсть ли чистый способ достижения этого?

Answer 1

Я не знаю, можно ли считать это значительно более простым, но сценарий, который вы даете, указывает, что вы уже знаете, что хост-компонент является стековым элементом, и у этого компонента есть обертка слота с именем класса 'slot-style'.Учитывая, что вы можете получить такую ​​ссылку (это работает как внутри компонента, так и из основного документа):

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' )