如何在调用attachShadow前访问自定义元素的childNodes？

当然可以！而且这其实是很合理的操作——毕竟在你创建Shadow DOM之前，自定义元素的原始子元素（也就是你在HTML里写的那些<jookah-image>）都存在于light DOM（组件的主DOM节点下），完全可以直接访问。

给你举个具体的实现例子，对应你的jookah-gallery组件场景：

class JookahGallery extends HTMLElement {
  connectedCallback() {
    // 这里还没调用attachShadow，直接通过this访问light DOM里的元素
    const allImages = this.querySelectorAll('jookah-image');
    
    allImages.forEach(imgEl => {
      const src = imgEl.getAttribute('src');
      console.log('拿到图片的src:', src);
      // 你可以在这里把src存起来，后续在Shadow DOM里使用
    });

    // 等你获取完需要的信息后，再创建Shadow DOM
    this.attachShadow({ mode: 'open' });
    
    // 接下来就可以正常构建Shadow DOM的内容了，比如如果想保留原始图片，还能用slot引入
    this.shadowRoot.innerHTML = `
      <style>
        .gallery { display: flex; gap: 1rem; }
      </style>
      <div class="gallery">
        <slot></slot> <!-- 这个slot会把light DOM里的jookah-image显示在Shadow DOM中 -->
      </div>
    `;
  }
}

customElements.define('jookah-gallery', JookahGallery);

给你补几个关键知识点（毕竟你刚接触Shadow DOM）： #

• 为什么能这么做？：当自定义元素被挂载到页面后，它的子元素（也就是你写的<jookah-image>）会先被解析到组件的主DOM节点下（也就是this对应的节点），这部分就是light DOM。直到你调用attachShadow()，Shadow DOM才会被创建，但light DOM的元素并不会消失——只是默认情况下，Shadow DOM会接管组件的显示，如果你不写<slot>，light DOM的元素就不会显示，但依然能通过this查询到。
• 什么时候访问更可靠？：建议在connectedCallback里做这件事，而不是constructor。因为constructor执行时，组件可能还没挂载到DOM树，子元素可能还没被完全解析插入，这时候查询可能拿不到结果。connectedCallback是组件挂载到DOM后触发的，这时候子元素都已经存在了。
• 后续还能访问吗？：就算调用了attachShadow()之后，你依然可以通过this.querySelectorAll('jookah-image')拿到这些元素，只要你没主动移除它们。

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