I recently remembered a simple but very useful trick: adding the notranslate class to a component’s custom class.
This helps prevent automatic translators from modifying text inside that component, including text exposed through HTML attributes in the DOM.
You can combine it with your own class—for example, custom-class notranslate—to protect parts of the UI where translation could cause unintended changes.
When applied to a container component, notranslate typically affects all content inside it, including deeply nested components. This reduces the need to apply it repeatedly to each child.
Tip: Use your own class (e.g. custom-class) for styling or logic. Treat notranslate purely as a translation safeguard.
Note: This reduces the risk of automatic translation, but behavior may vary across different translators. Avoid relying on translation-sensitive behavior when 100% reliability is required.