When you need to support both LTR and RTL modes, try to avoid using values such as left and right. For certain CSS properties, you can use the appropriate mixin to have this handled for you automatically.
For example, if you wanted transform-origin to be RTL-aware, you would use the transform-origin mixin:
@include transform-origin(start, center);
This would output transform-origin: left center in LTR mode and transform-origin: right center in RTL mode.
These mixins depend on the :host-context pseudo-class when used inside of shadow components, which is not supported in WebKit. As a result, these mixins will not work in Safari for macOS and iOS when applied to shadow components.
To work around this, you should set an RTL class on the host of your component and set your RTL styles by targeting that class:
<Host
class={{
'my-cmp-rtl': document.dir === 'rtl'
})
>
...
</Host>
:host {
transform-origin: left center;
}
:host(.my-cmp-rtl) {
transform-origin: right center;
}