Firefox built-in translator ignores the translate="no" attribute
My website has some web components that render an icon based on their icon attribute, like so: <button-icon icon="close" translate="no" type="button" variant="standard"></button-icon>
everything works fine until i translate the page using the latest firefox 133 on both windows 11 and android, the icon rendered in the shadow dom gets translated by firefox ignoring the translate="no" and the icon in the button doesn't show correctly anymore. This doesn't happen when i translate the webpage using chrome. If I remove the translate="no" attribute, i get the same error in chrome too, and that's the reason i added the translate attribute. I believe this isn't intended behaviour and i would consider this a bug, and tbh makes me wanna use firefox less because if I translate automatically then not only my website breaks but also many other have the same risk. If translate="no" is applied to a web component, firefox should avoid translating elements in its shadow dom. I hope this pain point can be addressed in future versions, let me know if i can provide more information, thanks for reading and have a nice day.
All Replies (1)
Generally we support "class=notranslate" and translate="no" so it definitely looks like a bug. Can you report it on https://bugzilla.mozilla.org ? Thanks.