将基本样式加载到 shadow-dom答案

【问题标题】：Load essential styles to shadow-dom将基本样式加载到 shadow-dom
【发布时间】：2021-09-28 22:03:25
【问题描述】：

我喜欢 shadow dom 样式封装的想法，但我想在每个 shadow dom 中包含基本样式（重置、排版等）。

 <head>
 <link rel="stylesheet" href="core.css">
 ...
 </head>

 <my-component></my-component>
 <script>
   
   customElements.define('my-component', class MyComponent extends HTMLElement {
     ...
     connectedCallback() {
        this.shadow = this.attachShadow({mode: 'open'});
        const linkElem = document.createElement('link');
        linkElem.setAttribute('rel', 'stylesheet');
        linkElem.setAttribute('href', 'core.css');

        // applying exiting "core.css" to current shadow dom 
        this.shadow.appendChild(linkElem);
    }
   });
 </script>

由于core.css 被调用（链接）了两次，会影响性能吗？

【问题讨论】：

标签： javascript html css web-component shadow-dom

【解决方案1】：

你可以试试Constructable Stylesheet Objects

通过这种方法，您可以定义全局样式，然后将它们与shadowRoot.adoptedStylesheets 一起使用，如下所示：

import {
    resetSheet,
    headlinesSheet,
    coreSheet,
} from '/style-system.js';
import {
    myComponentStyles,
} from './styles.js';

// ...

    connectedCallback() {
        // Only compose styles once
        if (!this.shadowRoot.adoptedStyleSheets.length) {
            this.shadowRoot.adoptedStyleSheet = [
                // global stylesheets
                resetSheet,
                headlinesSheet,
                coreSheet,
                // specific sheet for this component
                myComponentStyles
            ]
        }
    }

与您使用的方法（为每个组件创建链接元素）相比，这种方法的主要优点是：

您可以共享全局样式，以便在定义一次的多个组件之间使用
您只加载正在呈现的组件正在使用的样式，这会扩展性能，因为它会延迟加载样式表
您可以动态更改这些全局样式（因为它们是 JS 组件），而无需在多个元素中应用更改，从而进行更多解耦更改

由于这是一种相当新的方法，我建议您阅读以下文章，以便更深入地了解Constructable Stylesheet Objects

【讨论】：

太棒了！但它现在只支持 chrome :( caniuse.com/mdn-api_document_adoptedstylesheets
嗯，很遗憾，很抱歉不知道这一点，尽管在接下来的几周/几个月内寻找一些非常酷的东西。祝你好运，伙计
链接每个组件的 css 文件。如果您确实遇到性能问题，您很可能还有许多其他问题。构建样式表是未来的解决方案

【解决方案2】：

浏览器将缓存core.css 的请求，因此实际上并没有性能损失，但由于样式表将异步加载，当浏览器第一次获取 css 时，您可能会得到一闪而过的无样式内容 (FOUC) .

解决此问题的一种可能方法是在您的文档<head> 中预加载 css 文件，以便在您的 Shadow DOM 启用时（可能因为预加载只是对浏览器的“提示”）可用解析：

<link rel="preload" href="core.css" as="style">

【讨论】：