native-web-component - 如何阻止 FOUC 发生在原生 Web 组件中

Question

我正在试验原生网络组件，到目前为止我真的很喜欢它们。

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

但是，我注意到一个不良影响 - 每当我从一个“页面”切换到另一个“页面”(实际上，这只是卸载一个 native Web 组件，然后安装另一个)时，大约半秒钟，我看到Web 组件使用默认样式呈现，然后使用我在阴影 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 组件，我什至会很高兴地放弃影子 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;
}

当然，你也可以这样设置开槽元素的样式