How are you translating Custom HTML widgets

Hi, we have a few widgets we are updating directly within the widget with JavaScript based on the user’s selected language. It defaults to English but after the page loads it grabs the selected language from the page's html tag <html lang="en-US"> then swaps out the text of the widget accordingly.

Here’s a sample from a widget I built for users to change their usernames.

<div class="update-wrapper">
  <h1 class="username-title"></h1>
  <p class="description"></p>
  <label class="username-label"></label>
  <input class="username-field" type="text" id="username-field"/>
  <button id="updateBtn"></button>
  <div id="out"></div>


</div>

<script>
    console.log("username widget script loaded");

    //Set translations
    let htmltag = document.querySelector("html");
    let language = htmltag.getAttribute("lang");
    let title = "Update your Username"
    let description = 'A "personal" username (i.e. CADMGR, JSmith, Sally_456) is a friendly way to identify yourself to other community members.'
    let label = "User Name"
    let saveButton = "Save"
    //Error messages and success
    let lengthError = "Username must be between 3 and 15 characters long."
    let unavailable = "Username is unavailable"
    let success = "Your username has been updated!"
    let generalError = "Something went wrong. Please try again later or contact community management for assistance."
    switch (language) {
      case "en-US":
        break;
      case "fr-FR":
        title = "Mettre à jour votre nom d’utilisateur"
        description = 'Un nom d’utilisateur « personnel » (par exemple CADMGR, JSmith, Sally_456) est une manière conviviale de vous identifier auprès des autres membres de la communauté.'
        label = "Nom d’utilisateur"
        saveButton = "Enregistrer"
        lengthError = "Le nom d’utilisateur doit contenir entre 3 et 15 caractères"
        unavailable = "Nom d’utilisateur indisponible"
        success = "Votre nom d’utilisateur a été mis à jour!"
        generalError = "Un problème est survenu. Veuillez réessayer plus tard ou contacter l’équipe de gestion de la communauté pour obtenir de l’aide."
        break;
      case "zh-CN":
        title = "更新用户名";
        description = '“个人”用户名（例如 CADMGR、JSmith、Sally_456）是一种让其他社区成员识别你的友好方式。'
        label = "用户名"
        saveButton = "保存"
        lengthError = "用户名长度必须在 3 到 15 个字符之间"
        unavailable = "用户名已被占用"
        success = "您的用户名已更新!"
        generalError = "出了点问题。请稍后再试，或联系社区管理团队以获取帮助。"
        break;
      case "de-DE":
        title = "Benutzernamen aktualisieren";
        description = 'Ein „persönlicher“ Benutzername (z. B. CADMGR, JSmith, Sally_456) ist eine freundliche Art, sich anderen Community‑Mitgliedern zu zeigen.'
        label = "Benutzername"
        saveButton = "Speichern"
        lengthError = "Der Benutzername muss zwischen 3 und 15 Zeichen lang sein"
        unavailable = "Benutzername nicht verfügbar"
        success = "Dein Benutzername wurde aktualisiert!"
        generalError = "Etwas ist schiefgelaufen. Bitte versuchen Sie es später erneut oder wenden Sie sich an das Community-Management, um Unterstützung zu erhalten."
        break;
      case "it-IT":
        title = "Aggiorna il tuo nome utente";
        description = 'Un nome utente “personale” (ad esempio CADMGR, JSmith, Sally_456) è un modo amichevole per farti riconoscere dagli altri membri della community.'
        label = "Nome utente"
        saveButton = "Salva"
        lengthError = "Il nome utente deve contenere da 3 a 15 caratteri"
        unavailable = "Nome utente non disponibile"
        success = "Il tuo nome utente è stato aggiornato!"
        generalError = "Si è verificato un errore. Riprova più tardi o contatta la gestione della community per assistenza."
        break;
      case "ja-JP":
        title = "ユーザー名を更新する";
        description = '「個人」ユーザー名（例：CADMGR、JSmith、Sally_456）は、コミュニティ内で他のメンバーに自分を分かりやすく伝えるための親しみやすい識別名です。'
        label = "ユーザー名"
        saveButton = "保存"
        lengthError = "ユーザー名は3～15文字である必要があります"
        unavailable = "このユーザー名は使用できません"
        success = "ユーザー名が更新されました!"
        generalError = "問題が発生しました。後でもう一度お試しいただくか、コミュニティ管理までお問い合わせください。"
        break;
      case "ko-KR":
        title = "사용자 이름 업데이트";
        description = '‘개인’ 사용자 이름(예: CADMGR, JSmith, Sally_456)은 다른 커뮤니티 멤버들에게 자신을 친근하게 식별할 수 있도록 해주는 방법입니다.'
        label = "사용자 이름"
        saveButton = "저장"
        lengthError = "사용자 이름은 3자에서 15자 사이여야 합니다"
        unavailable = "사용자 이름을 사용할 수 없습니다"
        success = "사용자 이름이 업데이트되었습니다!"
        generalError = "문제가 발생했습니다. 나중에 다시 시도하시거나 커뮤니티 관리자에게 도움을 요청해 주세요."
        break;
      case "pt-PT":
        title = "Atualizar seu nome de usuário";
        description = 'Um nome de usuário “pessoal” (por exemplo, CADMGR, JSmith, Sally_456) é uma forma amigável de se identificar para outros membros da comunidade.'
        label = "Nome de usuário"
        saveButton = "Salvar"
        lengthError = "O nome de usuário deve ter entre 3 e 15 caracteres"
        unavailable = "Nome de usuário indisponível"
        success = "Seu nome de usuário foi atualizado!"
        generalError = "Algo deu errado. Tente novamente mais tarde ou entre em contato com a equipe de gerenciamento da comunidade para obter ajuda."
        break;
      case "es-ES":
        title = "Actualizar tu nombre de usuario";
        description = 'Un nombre de usuario “personal” (por ejemplo, CADMGR, JSmith, Sally_456) es una manera amigable de identificarte ante otros miembros de la comunidad.'
        label = "Nombre de usuario"
        saveButton = "Guardar"
        lengthError = "El nombre de usuario debe tener entre 3 y 15 caracteres"
        unavailable = "Nombre de usuario no disponible"
        success = "¡Tu nombre de usuario ha sido actualizado!"
        generalError = "Algo salió mal. Inténtalo de nuevo más tarde o ponte en contacto con la administración de la comunidad para obtener ayuda."
        break;
    }

    setTimeout(() => {
      document.getElementById("username-field").value = inSidedData.user.name;
      document.getElementsByClassName("username-title")[0].innerHTML = title;
      document.getElementsByClassName("description")[0].innerHTML = description;
      document.getElementsByClassName("username-label")[0].innerHTML = label;
      document.getElementById("updateBtn").innerHTML = saveButton;
    }, 200)