Chromium浏览器中Shadow组件无法复用preloaded资源问题求助

问题描述 #

在页面<head>中通过rel="preload"预加载style.css资源后，自定义Shadow组件welcome-comp内通过<link rel="stylesheet">引入同路径CSS时，资源会被重复下载；点击按钮再次渲染组件，仍会触发新的请求。该问题仅出现在Chromium内核浏览器（如Chrome、Edge）中，Firefox、Safari可正常复用预加载资源，非Shadow组件无此问题。

代码示例 #

HTML代码 #

<html>
<head>
    <meta charset="utf-8"/>
    <title>Demo</title>
    <link rel="preload" type="text/css" as="style" href="style.css" />
    <script>
      class WelcomeComp extends HTMLElement {
        connectedCallback() {
          this.attachShadow({ mode: 'open' });
          let link = document.createElement('link');
          link.href = 'style.css';
          link.rel = 'stylesheet';
          this.shadowRoot.appendChild(link);
      
          let content = document.createElement('div');
          content.setAttribute('class', 'cls');
          content.setAttribute('id', 'cls');
          content.innerHTML = 'welcome here! check network tab new request triggered';
          this.shadowRoot.appendChild(content);
        }
      }
      customElements.define('welcome-comp', WelcomeComp);
    </script>
  </head>
  <body>
    <div id="outlet">
      <welcome-comp></welcome-comp>
    </div>
    <button
      onclick='document.getElementById("outlet").appendChild(document.createElement("welcome-comp"))'>
      render new component
    </button>
  </body>
</html>

CSS代码 #

.cls{color:red}

问题原因 #

Chromium内核对Shadow DOM内的样式请求与主文档预加载资源的缓存复用逻辑存在差异：预加载的资源未被标记为可被Shadow DOM的<link>请求复用，每次创建新的Shadow组件时，都会发起新的资源请求。而Firefox和Safari的缓存机制能正确识别同路径资源并复用。

解决方案 #

方案1：预加载后在主文档触发缓存 #

在<head>中添加<link rel="stylesheet">标签，让预加载的资源被主文档缓存，Shadow DOM的样式请求会自动复用缓存：

<head>
    <meta charset="utf-8"/>
    <title>Demo</title>
    <link rel="preload" type="text/css" as="style" href="style.css" />
    <!-- 新增标签触发缓存，不影响主文档样式 -->
    <link rel="stylesheet" href="style.css" media="none" onload="this.remove()">
    <script>
      // 组件代码保持不变
    </script>
</head>

说明：media="none"确保样式不会作用于主文档，onload="this.remove()"加载完成后移除标签，避免冗余。

方案2：手动缓存CSS内容，注入Shadow DOM #

通过Fetch API预加载并缓存CSS内容，后续创建组件时直接将缓存内容作为<style>标签插入Shadow DOM，彻底避免重复请求：

class WelcomeComp extends HTMLElement {
  // 静态属性缓存CSS内容，所有组件实例共享
  static cachedCSS = null;

  async connectedCallback() {
    this.attachShadow({ mode: 'open' });
    
    // 仅首次加载时发起请求
    if (!WelcomeComp.cachedCSS) {
      const res = await fetch('style.css');
      WelcomeComp.cachedCSS = await res.text();
    }

    // 创建style标签插入Shadow DOM
    const style = document.createElement('style');
    style.textContent = WelcomeComp.cachedCSS;
    this.shadowRoot.appendChild(style);

    const content = document.createElement('div');
    content.className = 'cls';
    content.id = 'cls';
    content.textContent = 'welcome here! check network tab new request triggered';
    this.shadowRoot.appendChild(content);
  }
}
customElements.define('welcome-comp', WelcomeComp);

说明：静态属性cachedCSS确保所有组件实例共享同一份CSS内容，仅发起一次请求。

方案对比 #

• 方案1实现简单，适合快速解决问题；若主文档不需要该样式，需通过媒体查询避免影响全局样式。
• 方案2更灵活，完全控制资源加载逻辑，不会对主文档造成冗余，适合仅在Shadow DOM中使用的样式。

内容的提问来源于stack exchange，提问作者MOHAMED SIKKANDAR AFZAL M