We need to support RTL in Web Components. We don't have :host or content: selectors yet that's why we need other solution to override the Web Components styles.

Here (http://pivanov.github.io/gaia-header/) is a working demo. Basicaly we add the dir attr to the .inner element and then just use: .inner[dir="rtl"] .icon-back:before { transform: scaleX(-1); }; I'm not sure we need the event who listen on html[dir] changes and maybe `transform: scaleX(-1);` is not the best solution because of the performance :) but we can add rtl icons to the font and just use them when we need them. Hope this help us to find a best solution for this problem. Thoughts?

Looks good. I would just use the 'forward' icon instead of using the transform, but guess it doesn't matter too much. .inner[dir="rtl"] .icon-back:before { content: 'forward'; };

Yeah :) I just use this the transform because we need to have in mind that in some cases we will need rtl icon :)

For something that works today we should set this inside the `createdCallback` and keep it up to date. Moving forward we should use `:host-context` [1] selector for a CSS only solution: :host-context([dir="rtl"]) .icon-back:before { content: 'forward'; }; Could this bug be a good reason to start platform work on shadow-dom CSS selectors? Our workarounds are going to start piling up. [1] http://robdodson.me/blog/2014/04/10/shadow-dom-css-cheat-sheet/#host-context

FYI, flipping the spacial model of apps is not always the right answer for RTL. There are a lot of edge cases that require informed decisions and user research to go along with such a decision. swilkes has more details here. We don't have RTL committed for web components until 2.2. If shadow-dom selectors are targeted for implementation in that timeframe, it might be better to "do it right, since we might have to re-write any work-around RTL hacks anyway. Just a thought.

[Tracking Requested - why for this release]:

Firefox OS is not being worked on