5 years ago
a year ago


(Reporter: pivanov, Unassigned, NeedInfo)


Gonk (Firefox OS)
Dependency tree / graph

Firefox Tracking Flags



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 ( 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.

Flags: needinfo?(wilsonpage)
Flags: needinfo?(gbrander)
Flags: needinfo?(21)
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';
Flags: needinfo?(wilsonpage)
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.

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.
Flags: needinfo?(gbrander)
Blocks: 1037755
See Also: → 1082541

Comment 6

4 years ago
[Tracking Requested - why for this release]:
OS: Mac OS X → Gonk (Firefox OS)
Priority: -- → P2
Hardware: x86 → ARM

Comment 7

a year ago
Firefox OS is not being worked on
Last Resolved: a year ago
Resolution: --- → WONTFIX
You need to log in before you can comment on or make changes to this bug.