將基本樣式加載到 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