CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstrapweb-component
anderspitman
anderspitman

Reputation: 10520

Can Shadow DOM elements inherit CSS?

I was listening to this episode of JavaScript Jabber:

http://javascriptjabber.com/120-jsj-google-polymer-with-rob-dodson-and-eric-bidelman/

At one point Rob says:

And everyone has this first inclination, because it makes so much sense. You’re like, “Bootstrap is components. I’m just going to make them into tags.” But then you run into the fact that the Bootstrap style sheet is just one big long style sheet that was written assuming that it could touch every part of the document. And when you are suddenly scoping bits of the markup, scoping it so that the CSS can’t reach it, the CSS would actually have to be in the Shadow DOM with it and you would have to write that element from the ground up, that’s where people I think get really confused and really frustrated initially.

This made me wonder, how would you solve this problem with Web Components? Is there a way for Shadow DOM templates to inherit common styles, or would you have to repeat shared CSS for each separate component? Or something else?

Upvotes: 24

Views: 16779

Answers (5)

charliepark
charliepark

Reputation: 1560

The current state of the Shadow DOM / CSS is that you can link to external stylesheets. More info at MDN: https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM#Internal_versus_external_styles

You could, then, have some sort of utility stylesheet (Tailwind or similar) that all of your components reference, so you don't duplicate CSS. In theory, that CSS file would get downloaded once, cached, and then the custom elements would each be able to use the classes in it (as long as they each link to it).

Upvotes: 8

Pointy
Pointy

Reputation: 413737

Note: the substance of the answer below is no longer relevant, as the features discussed have been deprecated for some time. Don't use the sample code, but feel free to take a peek into the Internet past.

In a complete Shadow DOM implementation, CSS has a ::shadow pseudo-class, and also the /deep/ combinator.

The ::shadow pseudo-class lets you break into the shadow DOM under an element, and it matches the shadow root. The /deep/ combinator effectively opens up the shadow DOM completely.

Thus, if you had a <x-foo> element with <span> elements inside, you could make them red with

x-foo::shadow span { color: red; }

Or make all <spans> in any shadow DOM red:

body /deep/ span { color: red; }

Upvotes: 14

Timur Fayzrakhmanov
Timur Fayzrakhmanov

Reputation: 19587

I think I understand what you ask about. You can use link in every custom element to include your main styles or extend existing element that includes it. For example (using Polymer):

<polymer-element name="ui-button" noscript>
  <template>
    <link rel="stylesheet" href="main.css"/>
    <div class="class-from-main" style="">
      <content></content>
    </div>
  </template>
</polymer-element>

I think it worth reading to you: https://github.com/necolas/normalize.css/issues/408

Upvotes: 1

Cristian
Cristian

Reputation: 6077

Take a look at this lesser known method:

The <core-style> Polymer element

You can define the styles in an html import file: 

<core-style id="x-test">
  :host {
    backgound-color: steelblue;
  }
</core-style>

And then you can use them in more than 1 element:

<polymer-element name="x-test" noscript>
  <template>
    <core-style ref="x-test"></core-style>
    <content></content>
  </template>
</polymer-element>

In this well written article you can read more about how to use the technique.

However, a disadvantage I can think of is the impossibility of using SASS with this technique, since the styles are defined inside a <core-style> tag and not inside a <style> element, and there isn't a clear way to import an external stylesheet.

Upvotes: 3

elzi
elzi

Reputation: 5672

Here's one example of it working : http://jsbin.com/zayih/1/edit?html,css,output

Though it does not seem to work when targeting it with #placeholder

Turn on "Show user agent shadow DOM" in Chrome devtools config tab, then inspect the <input> to see what I mean

Upvotes: 0

Related Questions