examples/message.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>intl-message demo</title>
  <style>
  html { font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji; }
  p > span, p > intl-message { display: block }
  intl-message { font-weight: bold; }
  </style>
</head>
<body>
  <h1>intl-message demo</h1>

  <button onclick="i18next.changeLanguage('en-GB')">en-GB</button>
  <button onclick="i18next.changeLanguage('en-US')">en-US</button>
  <button onclick="i18next.changeLanguage('fr')">fr</button>

  <p>
    <span>&lt;intl-message label="undefined.key"></span>
    <intl-message label="undefined.key"></intl-message>
  </p>
  <p>
    <span>&lt;intl-message label="test:key"></span>
    <intl-message label="test:key"></intl-message>
  </p>
  <p>
    <span>&lt;intl-message label="title" value="Title"></span>
    <intl-message label="title" value="Title"></intl-message>
  </p>
  <p>
    <span>&lt;intl-message label="deep" value='{"key":"Hello","val":"World"}'></span>
    <intl-message label="deep" value='{"key":"Hello","val":"World"}'></intl-message>
  </p>
  <p>
    <span>&lt;intl-message label="html" value="&lt;span style='color: red'>dangerous&lt;/span>"></span>
    <intl-message label="html" value="<span style='color: red'>dangerous</span>"></intl-message>
  </p>
  <p>
    <span>&lt;intl-message label="html" dangerous value="&lt;span style='color: red'>dangerous&lt;/span>"></span>
    <intl-message label="html" dangerous value="<span style='color: red'>dangerous</span>"></intl-message>
  </p>
  <p>
    <span>&lt;intl-message label="item" count="1"></span>
    <intl-message label="item" count="1"></intl-message>
  </p>
  <p>
    <span>&lt;intl-message label="item" count="10"></span>
    <intl-message label="item" count="10"></intl-message>
  </p>

  <!-- always load i18next first -->
  <script src="https://unpkg.com/i18next@19/i18next.min.js"></script>
  <script src="https://unpkg.com/i18next-wc/dist/intl-message.js"></script>
  <!-- <script src="../dist/intl-message.js"></script> -->

  <script>
    i18next.init({
      lng: "en",
      fallbackLng: "en",
      resources: {
        en: {
          default: {
            title: "My {{value}}",
            deep: "In English: {{value.key}} {{value.val}}!",
            html: "With HTML it might get {{value}}",
            item: "One item",
            item_plural: "{{count}} items",
            placeholder: 'fill in here',
            'Selected language': 'Selected language:'
          },
          test: {
            key: "A value"
          }
        },
        'en-US': {
          default: {
            deep: "In US English: {{value.key}} {{value.val}}!"
          }
        },
        fr: {
          default: {
            title: "Mon {{value}}",
            deep: "En anglais: {{value.key}} {{value.val}} !",
            html: "Avec le HTML, cela pourrait devenir {{value}}",
            item: "Un seul article",
            item_plural: "{{count}} articles",
            placeholder: 'remplir ici',
            'Selected language': 'Langue choisie :'
          },
          test: {
            key: "une valeur"
          }
        }
      },
      defaultNS: "default",
      fallbackNS: "global"
    })
  </script>
  <script src="iframeheight.js"></script>
</body>
</html>