2

我正在尝试使用原生 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 保存在一组组织良好的子目录中。

4

3 回答 3

2

详细阐述@earlAchromatic 的回答和Google 的推荐。

为了防止其他内容重排，您可以设置可能的高度和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;
}

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

于 2021-08-18T13:06:19.470 回答
1

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

于 2020-07-01T18:43:07.407 回答
0

即使关闭了开发工具，我仍然遇到问题，因此对于最终在这里尝试解决使用 Web 组件时的 FOUC 问题的任何人来说，对我有用的解决方案是使用:defined伪类来定位组件并预先设置它的样式在通过 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

于 2021-07-17T20:26:58.470 回答