自定义元素中如何在首次渲染前获取按钮高度以定位菜单？

好问题！其实你完全可以不用通过两次渲染来解决这个问题，这里有几个更优雅的方案，按推荐优先级排序：

方案1：用纯CSS替代JavaScript计算（最优解） #

这是最简洁高效的方式，完全不需要写JS来获取按钮高度。利用绝对定位的top: 100%属性，菜单会自动对齐到按钮的底部，不管按钮的高度是多少（哪怕主题动态改变）。如果需要菜单和按钮之间有间距，只需要加margin-top即可。

修改你的样式部分：

#dropdown-wrapper { position: relative; display: inline-block; }
#dropdown-menu { 
  position: absolute; 
  top: 100%; /* 自动对齐按钮底部 */
  left: 0; 
  margin-top: 4px; /* 可选：添加间距 */
}

如果需要菜单右对齐，也不用获取宽度，直接设置right: 0并重置left: auto：

#dropdown-menu.right-aligned {
  right: 0;
  left: auto;
}

这种方案没有任何JS开销，也不会有渲染闪烁的问题，是首选方案。

方案2：利用Lit的渲染时机（适合必须用JS的场景） #

如果你因为某些复杂需求必须用JS计算高度，可以借助浏览器的布局时机，在首次渲染完成后获取按钮高度，再触发一次更新。Lit的更新机制很高效，几乎不会出现视觉闪烁。

调整你的类代码：

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

class Dropdown extends HTMLElement {
  constructor() {
    super();
    this.root = this.attachShadow({ mode: "open" });
    this.buttonHeight = 0;
  }

  connectedCallback() {
    // 首次渲染
    this.update();
    // 等待浏览器完成布局后获取高度
    requestAnimationFrame(() => {
      const button = this.root.querySelector('button');
      this.buttonHeight = button.offsetHeight;
      // 触发二次更新，此时高度已经正确
      this.update();
    });
  }

  get template() {
    return html`
      <style>
        button { height: var(--button-height, 30px); }
        #dropdown-wrapper { position: relative; display: inline-block; }
        #dropdown-menu { position: absolute; top: ${this.buttonHeight}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 });
  }
}

这里用requestAnimationFrame确保浏览器已经完成了按钮的布局计算，此时获取的offsetHeight是准确的。

方案3：用ResizeObserver处理动态高度变化 #

如果按钮的高度可能在后续使用中动态改变（比如主题切换、响应式布局调整），可以用ResizeObserver来监听按钮的尺寸变化，自动更新菜单位置：

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

class Dropdown extends HTMLElement {
  constructor() {
    super();
    this.root = this.attachShadow({ mode: "open" });
    this.buttonHeight = 0;
    this.resizeObserver = null;
  }

  connectedCallback() {
    this.update();
    // 等待渲染完成后初始化监听
    requestAnimationFrame(() => {
      const button = this.root.querySelector('button');
      this.resizeObserver = new ResizeObserver((entries) => {
        entries.forEach(entry => {
          this.buttonHeight = entry.contentRect.height;
          this.update();
        });
      });
      this.resizeObserver.observe(button);
    });
  }

  disconnectedCallback() {
    // 组件销毁时清理监听，避免内存泄漏
    if (this.resizeObserver) {
      this.resizeObserver.disconnect();
    }
  }

  get template() {
    return html`
      <style>
        button { height: var(--button-height, 30px); }
        #dropdown-wrapper { position: relative; display: inline-block; }
        #dropdown-menu { position: absolute; top: ${this.buttonHeight}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 });
  }
}

这个方案能自动响应按钮高度的任何变化，非常适合动态场景。

内容的提问来源于stack exchange，提问作者Andreas Remdt