Astro为何将自定义元素的子元素渲染到元素外部？

核心问题分析 #

1. HTML表格的元素约束：<table>内部仅允许放置<thead>、<tbody>、<tr>等合法表格元素，直接在<tbody>里渲染<single-video>自定义元素时，浏览器的原生纠错机制会自动将其移到表格外部，这就是DOM顺序错乱的根本原因。
2. 自定义元素初始化时机错误：在constructor中调用querySelector时，自定义元素的子元素还未挂载到DOM上，因此无法找到目标元素。

具体修复步骤 #

1. 修正表格内的自定义元素结构 #

严格遵循HTML表格结构规则，将自定义元素包裹在<tr>内部：

<table>
  ...
  <tbody>
    {srcs.map((src, i) => (
      <tr>
        <SingleVideo src={src} .../>
      </tr>
    ))}
  </tbody>
</table>

同时调整SingleVideo组件的内部结构，确保自定义元素内的<th>作为合法的表格单元格存在：

<single-video data-name={name} data-amount={amount}>
  <th>{name}</th>
  <th id="imageLoad">asd</th>
  <th id="imageLoadAverage">asd</th>
  <th id="componentLoad">asd</th>
  <th id="componentLoadAverage">asd</th>
  <th id="failure">asd</th>
  <th>
    {[...Array(amount)].map((item, i) => (
      <video hidden id={`video${i}${name}`}>
        <source src={src} type="video/webm" />
      </video>
    ))}
  </th>
</single-video>

2. 调整元素查找的生命周期钩子 #

将DOM元素查找逻辑从constructor移到connectedCallback钩子中——该钩子会在元素挂载到DOM后触发，此时子元素已存在：

class MeasuringVideo extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({ mode: 'open' })
    shadow.innerHTML = `<slot></slot>`
  }

  connectedCallback() {
    // 元素已挂载，可正常查找子元素
    const imageLoad = this.querySelector("#imageLoad");
    // 此处可执行后续逻辑
  }
}

customElements.define("single-video", MeasuringVideo);

3. 确保脚本在客户端执行 #

Astro默认会在服务端渲染组件，需给自定义元素的脚本添加client:load指令，确保脚本在客户端加载时执行：

<script is:inline client:load>
  class MeasuringVideo extends HTMLElement {
    // 自定义元素逻辑
  }
  customElements.define("single-video", MeasuringVideo);
</script>

额外提示 #

• DOM顺序错乱并非Astro的特殊处理，而是浏览器对不合法表格结构的自动修正行为，必须严格遵循HTML表格的嵌套规则。
• 自定义元素的constructor仅负责初始化元素自身，所有与DOM交互的操作都应放在connectedCallback中执行。

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