ShadowDOM user styling

[Julien Eluard]

Hi,

(Apologies if this is not the right place to discuss the following)

I used to rely on 'applyAuthorStyles' to apply styles available from the main document to components relying on ShadowDOM. A typical usage is having all basic elements share styles defined by CSS framework (bootstrap, foundation). 'applyAuthorStyles' has been removed from the ShadowDOM spec and recently from Chrome Canary so I am looking for a replacement.

It does not appear ^ and ^^ could help as they can't refer to existing CSS rules. They do work when user defines their own rules though.

What is the recommended way to achieve that?

Thanks,

Julien

[Steve Orvell]

Good question. The recommended approach is to load the css in the scope in which it should apply. If you need scope crossing selectors, you'll need to rewrite the styling with ^ and ^^.

While it's true that the removal of applyAuthorStyles makes this particular use case more difficult, there were good reasons for its removal:

(1) applyAuthorStyles was always intended as a stop-gap. The right answer is to specifically style each scope, as mentioned above.

(2) applyAuthorStyles had a built in footgun. While it allowed selectors to jump scopes, the selectors had to match entirely within a given scope, e.g. 'ul li' would not match if the li was in the ul's shadowRoot. This meant it would sometimes work, but it would sometimes not and figuring out why was very arcane.

Follow Polymer on Google+: plus.google.com/107187849809354688692
---
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.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/4bb69407-92c0-4bf2-a296-8c3646164039%40googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.

[Julien Eluard]

Right, no question applyAuthorStyles was dangerous.

I can think of several use cases where ^ and ^^ would be somewhat limited.

Assuming you want to write a set of reusable components relying on ShadowDOM:

* they will have a default style, whose implementation is hidden. How can I use a CSS framework here without introducing copying and memory overhead across components?

* users should be able to override those styles easily. Relying on ^ and ^^ looks unpractical in the case of a CSS framework as this essentially implies rewriting it.

Those 2 points seems pretty important to allow the creation of library of components. Unless I am missing something I don't think current features are sufficient in this regard. Is this something polymer -the library- plans to address?

Thanks,

Julien

[Steve Orvell]

Lemme respond to these points out of order:

Unless I am missing something I don't think current features are sufficient in this regard. Is this something polymer -the library- plans to address?

Polymer intends to provide an element theme-ing system. We think we have the primitives to do this but the proof is in the pudding. It's a high priority.

I can think of several use cases where ^ and ^^ would be somewhat limited.

Yes, in general, this is a very hard problem. We're attempting to combine a language in css that's intended to style a single tree of elements with a system that provides an inter-meshing tree of trees.

The general starting point is that a custom element author provides a styling api, e.g. style the menu's icon via the .icon class. Then you can use, for example, x-menu ^ .icon.

How can I use a CSS framework here without introducing copying and memory overhead across components?

Chrome's implementation will ensure that styles are shared across custom element instances.

... Relying on ^ and ^^ looks unpractical in the case of a CSS framework as this essentially implies rewriting it.

Yes. In general, we have to own this new concept of scopes. It's not going to and shouldn't be trivial to jump into styling a shadowRoot. It's going to take some getting used to and may indeed require some additional platform support.

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/2aaea87f-baad-469f-8caa-da1929063d39%40googlegroups.com.

[Julien Eluard]

Thanks for the detailed answer!

>>How can I use a CSS framework here without introducing copying and memory overhead across components?

>Chrome's implementation will ensure that styles are shared across custom element instances.

Across instances yes, but across different element types from a library styled with the same CSS framework?

Even If I try to remove all superfluous rules for each type there could be significant duplicated rules overall.

Julien

[Julien Eluard]

Never mind I figured 'style' elements can be created at some higher level and then appended to the right ShadowDOM as needed thus allowing to share rule definitions.

Julien

2014-01-29 Julien Eluard <julien...@gmail.com>

[Justin Fagnani]

On Tue, Jan 28, 2014 at 8:21 PM, Julien Eluard <julien...@gmail.com> wrote:

Never mind I figured 'style' elements can be created at some higher level and then appended to the right ShadowDOM as needed thus allowing to share rule definitions.

Can't you just html-import the common styles?

 

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/CAKteE7M-f4_KzNW%2Bkr2Bw8v%2BaeZRNXbXo0LYwodMXvGzmF6aHg%40mail.gmail.com.

[Julien Eluard]

It is my understanding that this feature is currently handled by polymer code (https://github.com/Polymer/polymer-dev/blob/master/src/declaration/styles.js) and thus is essentially what I described?

2014-01-29 Justin Fagnani <justin...@google.com>

[David Claughton]

Hi,

Another option might be, if you were to use the less/sass versions of those frameworks you could just include the mix-ins you needed inside each component.  Some experimentation would probably be necessary as obviously those tools are not scope-aware.

Cheers,

   David.

[Eric Bidelman]

David is exactly right.

I've been using Compass on a few different Polymer projects for a while now. In fact, I've been meaning to write an article on the topic.

My approach has been to create an _elements.scss file that elements can reuse in their own stylesheets.

The two gotchas I've ran in to:

1. The sass compiler barfs on ^ and ^^ selectors. Bug filed.

2. Be careful if you're compiling such that comments are removed. Any rules with /* @poyfill */ will be stripped out. I've mostly avoided this by include these advanced rules in an inline <style> in the element.

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/235dda43-d703-4ef4-ab7e-8aebe1590d75%40googlegroups.com.

[Addy Osmani]

(bug was moved to libsass https://github.com/hcatlin/libsass/issues/238 for anyone looking)

Eric, have you been working around the cat/hat selectors not playing well with sass by moving those back to your regular <style>s too?

[Eric Bidelman]

Yep. For elements that require it, I skip sass altogether and inline the ^ and ^^ rules inside the element. You of course lose out on some of the niceties if sass.

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/2bebe8da-57aa-4192-bdfd-8d2174bc44ac%40googlegroups.com.