将基本样式加载到 shadow-dom

Question

我喜欢 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被调用（链接）两次会影响性能吗？

Answer 1

您可以尝试使用可构造样式表对象

通过这种方法，您可以定义全局样式，然后将它们与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有更扎实的了解

Answer 2

浏览器将缓存对core.css的请求，因此不会真正降低性能，但由于样式表将异步加载，因此当浏览器第一次获取 css 时，您可能会看到无样式内容 (FOUC) 的闪光。

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

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

将基本样式加载到 shadow-dom

问题描述

2 个解决方案

解决方案1
3 2021-07-21 16:24:14

解决方案2
0 2021-07-26 22:54:35

将基本样式加载到 shadow-dom

问题描述

2 个解决方案

解决方案1 3 2021-07-21 16:24:14

解决方案2 0 2021-07-26 22:54:35

解决方案1
3 2021-07-21 16:24:14

解决方案2
0 2021-07-26 22:54:35