javascript - カスタム要素で要素参照を取得する

Question

カスタム要素があるとします。メニューを開いて切り替えるボタンと、メニュー自体の 2 つの部分で構成されます。ボタン（ ）の真下にメニューを配置したいのですposition: absoluteが、ボタンの高さはテーマによって異なります。最初のレンダリングの前にボタンの高さを確認するにはどうすればよいですか?

簡単な例:

import { render, html } from 'lit-html';

class Dropdown extends HTMLElement {
  constructor() {
    super();

    this.root = this.attachShadow({ mode: "open" });

    this.update();  
  }

  get template() {
    return html`
      <style>
        button {
          height: 30px;
        }

        #dropdown-wrapper {
          position: relative;
          display: inline-block;
        }

        #dropdown-menu {
          position: absolute;
          top: ${dynamicButtonHeight}px;
          left: 0;
        }
      </style>

      <div id="dropdown-wrapper">
        <button type="button">Dropdown</button>

        <div id="dropdown-menu">
          <slot></slot>
        </div>
      </div>
    `;
  }

  update() {
    render(this.template, this.root, { eventContext: this });
  }
}

例でわかるように、最初のレンダリングでボタンの高さを知り、dynamicButtonHeight何らかの方法で変数を埋めたいと思っています。この例では 30px ですが、これは実際には任意の数である可能性があります。メニューを右に揃えたい場合に備えて、幅にも同じことが当てはまります。

this.root.querySelector("button").offsetHeight最初にマークアップをレンダリングし、使用してボタンへの参照を取得し、後で再レンダリングできることを知っています。これは lit-html のおかげで効率的ですが、これはダーティで、特定のユース ケースで壊れているように感じます。

他のアイデアはありますか？