Lit-Element中如何等待嵌套Shadow元素完成渲染？

组件结构如下，需要访问<styled-input>内部Shadow DOM中的原生<input>元素来设置默认值，但无法修改<styled-input>的内部逻辑：

<my-element>
  #shadowroot(open)
    <styled-input> <!-- 非自定义组件，无法修改内部逻辑 -->
      #shadowroot(open)
        <input /> <!-- 目标原生输入元素 -->
    </styled-input> 
</my-element>

在自定义元素的firstUpdated生命周期钩子中，<styled-input>已被创建，但其内部Shadow DOM尚未渲染：

protected firstUpdated(): void {
  console.log(this.shadowRoot);
  // 输出仅包含 <styled-input></styled-input>，无法获取内部的<input>
}

目前可以通过setTimeout获取到<input>元素，但这种方式不够可靠，请问在不修改<styled-input>内部逻辑的前提下，如何等待其内部Shadow DOM渲染完成？

以下是几种无需修改<styled-input>内部逻辑的可靠方法：

方法1：使用MutationObserver监听Shadow DOM变化 #

利用MutationObserver监听<styled-input>的子节点变化，当它的Shadow DOM渲染完成并添加了<input>后，立即执行操作：

protected firstUpdated(): void {
  const styledInput = this.shadowRoot?.querySelector('styled-input');
  if (!styledInput) return;

  // 观察styled-input的Shadow DOM内部变化
  const observer = new MutationObserver((mutations) => {
    const input = styledInput.shadowRoot?.querySelector('input');
    if (input) {
      // 找到目标元素，执行设置默认值等操作
      input.value = '默认值';
      observer.disconnect(); // 完成后停止监听
    }
  });

  // 若styled-input的Shadow Root已存在，直接检查
  if (styledInput.shadowRoot) {
    const input = styledInput.shadowRoot.querySelector('input');
    if (input) {
      input.value = '默认值';
      return;
    }
  }

  // 开始监听Shadow Root的子节点变化
  observer.observe(styledInput, {
    subtree: true,
    childList: true
  });
}

方法2：使用requestAnimationFrame循环检查 #

通过requestAnimationFrame在下一渲染帧循环检查<input>元素是否存在，比setTimeout更贴合浏览器渲染周期，可靠性更高：

protected firstUpdated(): void {
  const checkForInput = () => {
    const styledInput = this.shadowRoot?.querySelector('styled-input');
    const input = styledInput?.shadowRoot?.querySelector('input');
    if (input) {
      // 执行设置操作
      input.value = '默认值';
    } else {
      requestAnimationFrame(checkForInput); // 未找到则继续下一帧检查
    }
  };

  checkForInput();
}

方法3：监听load事件（若<styled-input>依赖外部资源） #

如果<styled-input>的Shadow DOM渲染依赖外部资源加载（比如样式、模板），可以尝试监听它的load事件：

protected firstUpdated(): void {
  const styledInput = this.shadowRoot?.querySelector('styled-input');
  if (!styledInput) return;

  const handleLoad = () => {
    const input = styledInput.shadowRoot?.querySelector('input');
    if (input) {
      input.value = '默认值';
    }
    styledInput.removeEventListener('load', handleLoad);
  };

  styledInput.addEventListener('load', handleLoad);
  // 若元素已加载完成，手动触发一次
  if (styledInput.isConnected && styledInput.shadowRoot?.querySelector('input')) {
    handleLoad();
  }
}

内容的提问来源于stack exchange，提问作者Noble Dinasaur