Correct Way To Apply Global Styles Into Shadow Dom

This questions is similar to some other on StackOverflow, but I couldn't find any answer describing applicable to my situation and non-deprecated method (and I'm starting thinking

Solution 1:

There's no real drawback with solution 3:

1. Whether you apply a CSS style to n elements in a main document, or to 1 element in n Shadow DOM, the style will be duplicated to the whole n elements anyways.

2. If you import a document n times in n Shadow DOM, il will be actually be loaded only one time and reused through the browser cache.

After that, il will rely on the browser implementation of Shadow DOM and CSS styles, and you should see a performance degradation only the thousands of Shadow DOM.

---

2019 update for Chrome 73+ and Opera 60+

Now you can directly instanciate a CSSStyleSheet object and assign it to different Shadow DOMs.

This way the HTML won't be duplicated.

var css = new CSSStyleSheet()
css.replaceSync( "@import url( main.css )" )
host.shadowRoot.adoptedStyleSheets = [css] 
host2.shadowRoot.adoptedStyleSheets = [css] 

You can also apply it to the global document:

document.adpotedStyleSheets = [css]

The other advantage is that an update on the stylesheet will be applied to all Shadow DOMs (and document) that adopted it.

 css.replaceSync( '.color { color: red }' )

Solution 2:

I managed to do it using javascript modules but I doubt it's the cleanest solution. You can create a GlobalStyles.js file that will contain the css styling that is common throughout various components. Changing the language mode on your editor to 'html' will provide syntax highlighting for the css.

const GlobalStyles = {
    main: `
        <style>body {
                overflow: hidden;
                margin: 0;
                font-family: 'Poppins';
            }
            h3 {
                font-size: 39px;

            }
        </style>
    `,

    button: `
        <style>button {
                display: block;
                cursor: pointer;
                outline: none;
                font-family: 'Poppins Medium';
                line-height: 17px;
                padding: 9px13px;
                font-size: 15px;
                background-color: #9f28d8;
                color: white;
                border: 2px solid;
                border-radius: 5px;
                border-color: #9f28d8;
                width: max-content;
            }
        </style>
    `
}

export default GlobalStyles;

Afterwards, you can import it into another js file that contains the code to the shadow dom of your custom element.

importGlobalStylesfrom'./GlobalStyles.js';

const template = document.createElement('template');
template.innerHTML = `

   ${GlobalStyles.button}

   <style>
       ul {
           font-family: Helvetica, Arial, sans-serif;
           font-size: 13px;
           width: 20em;
           list-style-type: none;
        }
   </style>



   <ul></ul>

   <button>Click me</button>
`;

exportclassCustomListextendsHTMLElement {
    constructor() {
        super();
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.appendChild(document.importNode(template.content, true));
    }
}

The drawback with this approach is it only works if you are working purely with js files.