如何解决Web Components样式化时出现的FOUC（无样式内容闪烁）问题

样式处理规范化方案 #

• 优先使用可构造样式表（Constructable Stylesheets）：这是原生Web Components生态下的标准化样式共享方案，完全规避零散内联样式、全局样式污染的问题，基础使用方式如下：
  先提前构造全局共享的样式实例：
  const globalComponentStyles = new CSSStyleSheet();
globalComponentStyles.replaceSync('/* 写入公共样式规则，也可以异步读取外部css文件内容后传入 */');
  组件初始化时直接挂载到Shadow Root即可：
  this.shadowRoot.adoptedStyleSheets = [globalComponentStyles, customComponentStyles];
• 组件私有样式直接内置在Shadow DOM的<style>标签中，对外暴露样式修改入口统一使用:host、::part伪类，不要使用非标准的样式穿透方案。

外部样式表FOUC问题优雅解决 #

FOUC本质是样式加载完成时间晚于组件渲染时间导致的，以下是无hack的原生解决方案：

• 预加载样式资源：所有组件依赖的外部样式表，在组件注册前就完成加载和解析，存入可构造样式表实例中，组件渲染时直接挂载已经解析完成的样式，完全消除加载时间差。
• 组件渲染占位控制：在组件connectedCallback触发时先设置组件默认隐藏，样式加载完成后再显示，参考实现：

  connectedCallback() {
    // 初始隐藏
    this.style.visibility = 'hidden';
    this.attachShadow({mode: 'open'});
    // 加载外部样式逻辑
    loadExternalStyles().then(() => {
      // 样式挂载完成后显示
      this.style.visibility = 'visible';
    })
  }
  

• 构建阶段内联样式：个人项目可以通过简单的构建脚本，自动把组件依赖的外部CSS内容直接注入到组件模板的style标签内，零运行时 overhead，完全不会出现FOUC。

Declarative Shadow DOM使用建议 #

目前该特性仅Chromium内核浏览器支持，标准还未完全稳定，如果要在生产环境使用需要搭配对应polyfill做降级兼容，也可以等后续标准落地后再做迁移，现有方案的代码后续也可以无缝迁移到DSD的实现中。

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