Best practice to share CSS across components

[Sönke Rohde]

Is there a best practice/recommended way on how to share styles across components?

I know, one of the nice features of web components is encapsulation but in a component set there are many shared styles.

Right now I just include a common.css like:

<element name="my-component" attributes="foo bar">

  <link rel="stylesheet" polymer-scope="global" href="css/common.css">

  ...

</element>

In this case it has global scope because it contains @font-face definitions.

Any plans to have a polyfill for css variables?

http://dev.w3.org/csswg/css-variables/

Sönke

[cod...@gmail.com]

Consider this question seconded :).

I'm currently doing the same thing - importing a stylesheet. I've done this in my HTML page as well as my "root" element. I've noticed that Chrome (I'm not using Canary) has downloaded this stylesheet twice. The stylesheet I'm importing is "ink" (basically a third party CSS, similar to bootstrap). I'm not sure if it would be wise for me to keep importing this because I plan on having many polymer elements (thousands-but only like 30 on screen at any given time).

So my question is similar to Sönke - how do I make this work?

Also, I can't seem to get applyAuthorStyles to work- I'm not sure how.

Thanks,

Ravi

[Steve Orvell]

Including a stylesheet like this is the recommended way to share styles between elements right now.

The ShadowDOM spec will likely provide api to efficiently share stylesheets. The spec bug is here: https://www.w3.org/Bugs/Public/show_bug.cgi?id=15818.

In this case it has global scope because it contains @font-face definitions.

The polymer-scope attribute should be set to global only for a sheet containing just rules that need to be in the global scope like @font-face. That these don't currently work in ShadowDOM is an implementation bug in Chrome. A global sheet will only be included in the global scope once so it's safe to use it wherever you need it. You should use a separate shared stylesheet for ShadowDOM styles.

Sönke

--
 
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.
Visit this group at http://groups.google.com/group/polymer-dev.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/2d500e3b-b23f-49fb-b858-51b6e4de0af6%40googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Steve Orvell]

 I've noticed that Chrome (I'm not using Canary) has downloaded this stylesheet twice. 

That sounds like a bug but I'm not able to reproduce it. Would you mind filing an issue at https://github.com/polymer/polymer/issues with more info? Thanks!

Also, I can't seem to get applyAuthorStyles to work- I'm not sure how.

In Polymer, you can set applyAuthorStyles to true on an element prototype:

    Polymer.register(this, {

      applyAuthorStyles: true

    });

Alternatively, you can set the property directly on a shadowRoot at any time (e.g. this.shadowRoot.applyAuthorStyles = true).

This flag will ensure any styles defined in an enclosing shadowRoot or the document apply to elements in the shadowRoot. One caveat: selectors must match entirely within the shadowRoot that has applyAuthorStyles set to true. A selector using a combinator like "x-foo x-bar" will NOT match if x-foo and x-bar are in different shadowRoots.

--

 
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.
Visit this group at http://groups.google.com/group/polymer-dev.

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/b092745d-43ac-4012-85e2-d66323899bf2%40googlegroups.com.

[Sönke Rohde]

On Monday, July 1, 2013 9:11:30 PM UTC-7, Steve Orvell wrote:

Including a stylesheet like this is the recommended way to share styles between elements right now.

The ShadowDOM spec will likely provide api to efficiently share stylesheets. The spec bug is here: https://www.w3.org/Bugs/Public/show_bug.cgi?id=15818.

Thanks for point to the spec bug! 

In this case it has global scope because it contains @font-face definitions.

The polymer-scope attribute should be set to global only for a sheet containing just rules that need to be in the global scope like @font-face. That these don't currently work in ShadowDOM is an implementation bug in Chrome. A global sheet will only be included in the global scope once so it's safe to use it wherever you need it. You should use a separate shared stylesheet for ShadowDOM styles.

That makes sense, thanks!

[cod...@gmail.com]

The author styles feature works perfectly for my use-case, thank you for the help. This is excellent.

As for the double loading - I think I know what the issue is now, the imported HTML file was including the CSS, but so was the root HTML file (which is not a polymer element). So it was just chrome loading the CSS as normal (index.html), and then the polymer element loading it separately. When I add the stylesheet to multiple polymer elements, I don't see a third or fourth loading of the stylesheet.

Thanks,

Ravi