Extensible Scoped Styles

[pemrouz]

@3liv / @gangji91, if you fancy taking a stab, here's the approach I was thinking towards extensible styling we briefly touched on.

This module already enables scoped styles using the syntax [css="some.css"]. Given that the /deep/ combinator is now being removed, and a component often declares it's own base styles, we need a way to allow an application to extend that. The simplest thing to do would be to extend this module to allow multiple scoped styles via [css="some.css some-modifiers.css"], which (in a non-shadow DOM browser) would result in the following:

<component css="some.css some-modifiers.css">
  <style resource="some.css">...</style>
  <style resource="some-modifiers.css">...</style>

[pemrouz]

Related: /deep/ will be deprecated in Chrome 45, so this is quite important to do asap.

[pemrouz]

An alternative would be to support the standard @import syntax. A component stylesheet could reference other common reusable stylesheet(s) and Ripple could go through the trouble of prepending them all as <style> tags until @import in Shadow DOM is natively supported by browsers.

I think we may need both options for multiple component stylesheets: configuration via the [css] attribute for application developers and @import for component developers, since using the [css] would unnecessarily leak internal implementation details beyond the Shadow DOM boundary .