Import necessary styles into the shadow DOM

Question

Import necessary styles into the shadow DOM

Embracing the concept of shadow dom styles encapsulation is exciting, but I wish to incorporate base styles into each shadow dom as well (reset, typography, etc).

 <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 existing "core.css" to current shadow dom 
         this.shadow.appendChild(linkElem);
     }
   });
 </script>

With core.css being called (linked) twice, could there be an impact on performance?

javascript html css web-component shadow-dom

Answer 1

Answer №1

If you're looking to optimize your styling approach, consider using Constructable Stylesheet Objects. By defining global styles and then incorporating them with shadowRoot.adoptedStylesheets, you can enhance the efficiency of your components:

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
        ]
    }
}

By utilizing this method, you gain several advantages over manually linking style elements to each component:

You can share global styles across multiple components by defining them once
The component only loads the necessary styles when rendered, improving performance through lazy loading
You can dynamically modify global styles (as they are JavaScript components), simplifying updates without affecting multiple elements

To deepen your understanding of Constructable Stylesheet Objects, consider exploring the following resources:

Answer 2

If you're looking to optimize your styling approach, consider using Constructable Stylesheet Objects. By defining global styles and then incorporating them with shadowRoot.adoptedStylesheets, you can enhance the efficiency of your components:

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
        ]
    }
}

By utilizing this method, you gain several advantages over manually linking style elements to each component:

You can share global styles across multiple components by defining them once
The component only loads the necessary styles when rendered, improving performance through lazy loading
You can dynamically modify global styles (as they are JavaScript components), simplifying updates without affecting multiple elements

To deepen your understanding of Constructable Stylesheet Objects, consider exploring the following resources:

Answer 3

Answer №2

When the browser caches the request for core.css, there is no real performance penalty. However, because the stylesheet will be loaded asynchronously, you may experience a flash of unstyled content (FOUC) as the browser retrieves the css for the first time.

To potentially avoid this issue, one solution is to preload the css file in your document within the <head> section. This way, it should (although preloads are merely 'hints' to the browser) be accessible by the time your Shadow DOM is parsed:

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

Answer 4

When the browser caches the request for core.css, there is no real performance penalty. However, because the stylesheet will be loaded asynchronously, you may experience a flash of unstyled content (FOUC) as the browser retrieves the css for the first time.

To potentially avoid this issue, one solution is to preload the css file in your document within the <head> section. This way, it should (although preloads are merely 'hints' to the browser) be accessible by the time your Shadow DOM is parsed:

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

Import necessary styles into the shadow DOM

Answer №1

Answer №2

Similar questions

Ways to clearly establish the concept of "a"

Finding the total amount in VueJS2

The "maxlength" attribute does not function with the input type "number" in an HTML textbox

bootstrap-vue tabs - reveal specific tab content based on URL anchor tag

Tips for eliminating double quotes from an input string

Show an image based on a query parameter

What is the method for retrieving a temporary collection in a callback function when using node-mongodb-native find()?

What is the importance of accessing the session object prior to the saving and setting of a cookie by Express-Session?

"Any tips on maintaining the blue color of my dropdown link when it is selected as active

Utilizing Airbnb's iCalendar Link for Automation

"Patience is key when waiting for an AJAX response within a jQuery loop

The visibility of buttons can be controlled based on the selected radio option

Why is my CSS not recognizing the animation I specified for it to play?

Error: Controller not found when angular.module is called from different files

creating custom HTML elements in Rails forms

Python Automation: Saving Excel Files with Selenium

Looking for the location of a matching brace in a dataset?

Determine the week number based on a specified starting day for the week

Encountering problems with ajax technology

Storing the path of a nested JSON object in a variable using recursion