CODEWITHSUNDEEP
htmlweb-componentshadow-dom
Ben Aston
Ben Aston

Reputation: 55759

Importing styles into a web component

What is the canonical way to import styles into a web component?

The following gives me an error HTML element <link> is ignored in shadow tree:

<template>
    <link rel="style" href="foo.css" />
    <h1>foo</h1>
</template>

I am inserting this using shadow DOM using the following:

var importDoc, navBarProto;

importDoc = document.currentScript.ownerDocument;

navBarProto = Object.create(HTMLElement.prototype);
navBarProto.createdCallback = function() {
  var template, templateClone, shadow;

  template = importDoc.querySelector('template');
  templateClone = document.importNode(template.content, true);

  shadow = this.createShadowRoot();
  shadow.appendChild(templateClone);
};

document.registerElement('my-nav-bar', {
  prototype: navBarProto
});

Upvotes: 20

Views: 26506

Answers (8)

connexo
connexo

Reputation: 56773

Using CSS module scripts:

// import the css and directly get a constructed stylesheet from it
import css from './path/to/styles.css' with { type: 'css' };

// ...

// then, in the constructor:
    this.shadowRoot.adoptedStyleSheets.push(css);

For more info: https://github.com/tc39/proposal-import-attributes

Upvotes: 1

rovyko
rovyko

Reputation: 4587

Answer no longer valid

The @import syntax was removed from CSSStyleSheet.replace()

Constructable Stylesheets

This is a new feature that allows for the construction of CSSStyleSheet objects. These can have their contents set or imported from a css file using JavaScript and be applied to both documents and web components' shadow roots. It will be available in Chrome with version 73 and probably in the near future for Firefox.

There's a good writeup on the Google developers site but I'll summarize it briefly below with an example at the bottom.

Creating a style sheet

You create a new sheet by calling the constructor:

const sheet = new CSSStyleSheet();

Setting and replacing the style:

A style can be applied by calling the methods replace or replaceSync.

  • replaceSync is synchronous, and can't use any external resources: 
    sheet.replaceSync(`.redText { color: red }`);
  • replace is asynchronous and can accept @import statements referencing external resources. Note that replace returns a Promise which needs to be handled accordingly. 
    sheet.replace('@import url("myStyle.css")')
  .then(sheet => {
    console.log('Styles loaded successfully');
  })
  .catch(err => {
    console.error('Failed to load:', err);
  });

Applying the style to a document or shadow DOM

The style can be applied by setting the adoptedStyleSheets attribute of either the document or a shadow DOM.

document.adoptedStyleSheets = [sheet]

The array in adoptedStyleSheets is frozen and can't be mutated with push(), but you can concatenate by combining with its existing value:

document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];

Inheriting from the document

A shadow DOM can inherit constructed styles from the document's adoptedStyleSheets in the same way:

// in the custom element class:
this.shadowRoot.adoptedStyleSheets = [...document.adoptedStyleSheets, myCustomSheet];

Note that if this is run in the constructor, the component will only inherit the style sheets that were adopted prior to its creation. Setting adoptedStyleSheets in the connectedCallback will inherit for each instance when it is connected. Notably, this will not cause an FOUC.

Example with Web Components

Let's create a component called x-card that wraps text in a nicely styled div.

// Create the component inside of an IIFE
(function() {
  // template used for improved performance
  const template = document.createElement('template');
  template.innerHTML = `
    <div id='card'></div>
  `;

  // create the stylesheet
  const sheet = new CSSStyleSheet();
  // set its contents by referencing a file
  sheet.replace('@import url("xCardStyle.css")')
  .then(sheet => {
    console.log('Styles loaded successfully');
  })
  .catch(err => {
    console.error('Failed to load:', err);
  });

  customElements.define('x-card', class extends HTMLElement {
    constructor() {
      super();
      this.attachShadow({
        mode: 'open'
      });
      // apply the HTML template to the shadow DOM
      this.shadowRoot.appendChild(
        template.content.cloneNode(true)
      );
      // apply the stylesheet to the shadow DOM
      this.shadowRoot.adoptedStyleSheets = [sheet];
    }

    connectedCallback() {
      const card = this.shadowRoot.getElementById('card');
      card.textContent = this.textContent;
    }
  });

})();
<x-card>Example Text</x-card>
<x-card>More Text</x-card>

Upvotes: 14

Shlomi Loubaton
Shlomi Loubaton

Reputation: 732

I achieved programmatic import of all styles from the document into a web component. Using the following code I created an assignable copy of the document's CSSStyleSheetList object:

  function stylesSheetListCopy(from) {
  let ret = []
  for (const style_obj of from){
    let styles = ""
    for (const rule_obj of style_obj.cssRules) {
      styles += rule_obj.cssText + "\n"
    }
    let sheet = new CSSStyleSheet();
    sheet.replaceSync(styles);
    ret.push(sheet)
  }
  return ret;
}

Then, to apply it:

const host = document.querySelector("#host");
const shadow = host.attachShadow({ mode: "open" });
shadow.adoptedStyleSheets = [...stylesSheetListCopy(document.styleSheets),
  ...shadow.adoptedStyleSheets];
const b = document.createElement("button");
b.setAttribute('class', 'btn btn-primary btn-lg px-4');
b.textContent = "In the shadow DOM";
shadow.appendChild(b);

Creating a copy was required since the following didn't work:

// Doesn't work:
shadow.adoptedStyleSheets = [...document.styleSheets];
// Throws exception: Can't adopt non-constructed stylesheets.

Upvotes: 0

Aleksei Matiushkin
Aleksei Matiushkin

Reputation: 121000

NB!!!

THIS ANSWER IS OUTDATED

PLEASE CHECK THE ANSWER BY Himanshu Sharma

Up-to-date answer: https://stackoverflow.com/a/48202206/2035262

According to Polymer documentation:

Polymer allows you to include stylesheets in your <polymer-element> definitions, a feature not supported natively by Shadow DOM.

This is a bit weird reference, but I could not google the straight one. It looks like at the moment there is no rumors about supporting links inside templates.

That said, whether you want to use vanilla web component, you should either inline your css with <style> tag, or load and apply your css manually in javascript.

Upvotes: 2

Archprogrammer
Archprogrammer

Reputation: 11

The above answers show how to import stylesheets into a web component, but importing a single style to a shadow DOM can be done (kind-of) programmatically. This is the technique I developed recently.

First - make sure that you embed your component-local styles directly in a template with the HTML code. This is to make sure that the shadow DOM will have a stylesheet in your element constructor. (importing other stylesheets should be ok, but you must have one ready in the constructor)

Second - use a css-variable to point at a css rule to import.

#rule-to-import {
   background-color: #ffff00;
}

my-element {
   --my-import: #rule-to-import;
}

Third - In the component constructor, read the CSS variable and locate the pointed to style in the document stylesheets. When found, copy the string but rewrite the selector to match the internal element(s) you wish to style. I use a helper function for this.

importVarStyle(shadow,cssvar,target) {
    // Get the value of the specified CSS variable
    const varstyle=getComputedStyle(this).getPropertyValue(cssvar).trim();
    if(varstyle!="") varstyle: {
        const ownstyle=shadow.styleSheets[0];
        for(let ssheet of document.styleSheets) {   // Walk through all CSS rules looking for a matching rule
            for(let cssrule of ssheet.cssRules) {
                if(cssrule.selectorText==varstyle) {    // If a match is found, re-target and clone the rule into the component-local stylesheet
                    ownstyle.insertRule(
                        cssrule.cssText.replace(/^[^{]*/,target),
                        ownstyle.cssRules.length
                    );
                    break varstyle;
                }
            }
        }
    }
}

Upvotes: 1

Himanshu sharma
Himanshu sharma

Reputation: 7929

Now direct <link> tag is supported in shadow dom.

One can directly use:

<link rel="stylesheet" href="yourcss1.css">
<link href="yourcss2.css" rel="stylesheet" type="text/css">

It has been approved by both whatwg and W3C.

Useful links for using css in shadow dom:

Direct css link can be used in shadow dom.

Upvotes: 24

Jammer
Jammer

Reputation: 1563

If you need to place external styles inside the <template> tag you could try

<style> @import "../my/path/style.css"; </style>

however I have a feeling this will start importing after the element has been created.

Upvotes: 14

markg
markg

Reputation: 434

Try the <style> element inside of <template>:

<template>
    <style>
       h1 { 
         color: red;
         font-family: sans-serif;
       }
    </style>
    <h1>foo</h1>
</template>

Upvotes: -3

Related Questions