Importing styles into a web component

html web-component shadow-dom
Ben Aston picture Ben Aston · Feb 22, 2015 · Viewed 8k times · Source

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
});

Answer

Jammer picture Jammer · Jun 2, 2015

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.

Related questions

What do /deep/ and ::shadow mean in a CSS selector?

In looking at Polymer, I see the following CSS selector in the Styles tab of Chrome 37's developer tools: I've also seen a selector with pseudo selector ::shadow. So, what do /deep/ and ::shadow in a CSS selector mean?

Read More
Is it possible to access Shadow DOM elements through the parent document?

This question is more aimed at user-created shadow DOM elements, but for accessibility I'll use the date input type for this question: Say for example I have a date input on my page. With a couple of bits edited out, …

Read More
How to get element in user-agent shadow root with JavaScript?

I need get elements from Shadow DOM and change it. How i can do it? <div> <input type="range" min="100 $" max="3000 $"> </div>

Read More