如何阻止原生 Web 组件发生 FOUC

Question

我正在尝试使用原生 Web 组件，到目前为止我真的很喜欢它们。

我创建了一个微型网站，它有一个主页、关于页面和一个联系页面，以及一个通过更改 URL 的哈希组件来工作的菜单。

但是，我注意到一个不良影响 - 每当我从一个“页面”切换到另一个（实际上，这只是卸载一个本机 Web 组件，然后安装另一个），大约半秒钟，我看到Web 组件使用默认样式渲染，然后使用我包含在 shadow DOM 中的样式进行绘制。

最初，我的组件是这样的：

    const template = document.createElement('template');
    template.innerHTML = `
        <style>
            @import '../reset.css';
            @import '../vars.css';
            @import '../bodyText.css';
        </style>
        <div class="body-text">
            <h1>Home page</h1>
            <p>Home. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </p>
    `;

    class HomePage extends HTMLElement {
        constructor() {
            super();
            this.attachShadow({ mode: 'open' });
            this.shadowRoot.append(template.content.cloneNode(true));
        }
    }

    export default HomePage;

我试图通过删除 CSS 导入来解决这个问题，并改为导入这样的样式：

    function createStylesheet(path) {
        const linkElem = document.createElement('link');
        linkElem.setAttribute('rel', 'stylesheet');
        linkElem.setAttribute('href', path);
        return linkElem;
    }

    const s1 = createStylesheet('../reset.css');
    const s2 = createStylesheet('../vars.css');
    const s3 = createStylesheet('../bodyText.css');

    const template = document.createElement('template');
    template.innerHTML = `
        <div class="body-text">
            <h1>Home page</h1>
            <p>Home. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </p>
    `;

    class HomePage extends HTMLElement {
        constructor() {
            super();
            this.attachShadow({ mode: 'open' });
            this.shadowRoot.append(template.content.cloneNode(true));
            this.shadowRoot.append(s1);
            this.shadowRoot.append(s2);
            this.shadowRoot.append(s3);
        }
    }

    export default HomePage;

但是，无论何时安装组件，都会出现一些未设置样式的内容。

如果它仅在首次加载某种类型的组件时发生，但每次安装自定义组件时都可以看到人工制品，这将不是什么大问题。

有没有办法阻止这种情况发生？如果这意味着我可以使用漂亮、轻量级的原生 Web 组件，我什至会很高兴地放弃 shadow DOM 而只使用 BEM！

我听说可以通过使用内联样式来防止这种情况发生，但我不想走这条路……我更愿意将 CSS 保存在一组组织良好的子目录中。

Answer 1

详细说明@earlAchromatic 的答案和Google's recommendation。

为了防止其他内容重排，您可以设置最终元素的可能高度和display:。

为了不显示分栏内容，我们以opacity:0开头。

your-custom-component {
    display: block;
    /* Be as precise as you can */
    min-height: 2em;
    transition: opacity 0.5s ease-out;
}
your-custom-component:not(:defined) {
    opacity: 0;
}

当然，您也可以通过这种方式设置开槽元素的样式

Answer 2

编辑：在键入此内容时，我发现 FOUC 仅在 Google Chrome 开发工具打开时发生，但在它们关闭时不会发生。也许发生这种行为是因为打开 devtools 时样式表永远不会被缓存......

Answer 3

即使关闭了开发工具，我仍然遇到问题，因此对于最终在这里尝试解决使用 Web 组件时的 FOUC 问题的任何人来说，对我有用的解决方案是使用 :defined psuedo-class 来定位组件并在通过 javascript 注册之前对其进行预样式化。

比如：

web-component:not(:defined) {
  display: block;
  height: 100vh;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  }

当组件注册时，选择器不再适用于组件，闪避。

在此处查看 google 的解决方案文档：https://developers.google.com/web/fundamentals/web-components/customelements#prestyle