To address this issue, there are a few solutions available, though some may not be the most efficient:
One common mistake is checking if the component itself has the direction set, when it should actually be set on the <html> tag for proper functionality. To work around this, you can consider using :host-context to look at the HTML attribute instead of the component itself. Here's an example:
@mixin rtl($property, $ltr-value, $rtl-value) {
:host-context([dir='ltr']) & {
#{$property}: $ltr-value;
}
:host-context([dir='rtl']) & {
#{$property}: $rtl-value;
}
}
However, it's important to check the browser support for :host-context by visiting canIUse. Currently, it only has about 75% coverage, which may be too low especially for mobile iOS users.
An alternative to :host-context() is :dir(), but it has very limited coverage at only 3%, making it less practical to use at the moment.
Although setting encapsulation to None may seem like a solution, it's not advisable as it makes all markup global for that component and could lead to unforeseen complications, especially considering direction is likely needed in many components.
The most effective approach right now involves utilizing logical properties from CSS. By using keywords like 'start' instead of 'left', you can achieve the desired layout without the need for mixins. Further information on logical properties can be found through resources such as the Mozilla Developer Network site.
For instance, your CSS would look something like this:
.yourClass {
border-start-start-radius: 0;
border-start-end-radius: 10px;
border-end-start-radius: 80px;
border-end-end-radius: 0;
}
Implementing logical properties allows for consistent presentation across varying text-direction scenarios without the complexity of mixins.