Polymer RTL text based on an attribute - polymer

Question

In my project I need to support Arabic and English, to do so I do the following:
<div class="{{ {'align-right': currentLanguageCode == 'ar'} | tokenList }}">{{languages[currentLanguageCode].supervisorName}}</div>
The above line will be repeated for every text rendering.
So I thought it will be better if I could do something like this:
bilingual-text.html
<polymer-element name="bilingual-text" attributes="languageCode">
<template>
<content></content>
</template>
<script>
Polymer({
languageCodeChanged: function() {
if (this.languageCode == 'ar') {
// add .align-right class.
} else {
// remove .align-right class.
}
}
})
</script>
</polymer-element>
Then
<bilingual-text languageCode="ar">{{languages['ar'].supervisorName}}</bilingual-text>
Is there any way to implement something like that?

Answer 1

Polymeric way
However, a Polymeric way to approach this is to use reflect: true when publishing the languageCode property. In that way, you can style this element based on this attr and/or it's value:
:host([languageCode="ar"]) {
direction: rtl;
}
Here's a working demo:
<script src="http://www.polymer-project.org/platform.js"></script>
<script src="http://www.polymer-project.org/polymer.js"></script>
<polymer-element name="bilingual-text" attributes="languageCode">
<template>
<style>
:host {
display: block;
}
:host([languageCode="ar"]) {
direction: rtl;
}
</style>
<content></content>
</template>
<script>
Polymer({
publish: {
languageCode: {value: null, reflect: true}
}
});
</script>
</polymer-element>
<bilingual-text>I'm LTR</bilingual-text>
<bilingual-text languageCode="ar">I'm RTL</bilingual-text>
Traditional way
Define languageCodeChanged() and call:
this.classList.toggle('align-right', this.languageCode == 'ar');