[lit-html][SVG] Unexpected application of i18n-format to SVG elements in HTML

[t2ym]

[lit-html][SVG] Unexpected application of i18n-format to SVG elements in HTML

Root Cause

• Custom elements are not supported in SVG
• <i18n-format> is applied to SVG elements in HTML
  • i18n-behavior and gulp-i18n-preprocess are handling the preprocessing

Expected

• <i18n-format> is not applied to SVG elements in HTML

Actual

• <i18n-format> is applied to SVG elements in HTML

Reproducible Code

    html`${bind(this, 'lit-clock')}
      <div class='square'> <!-- so the SVG keeps its aspect ratio -->
        <svg viewBox='0 0 100 100'>
          <!-- first create a group and move it to 50,50 so
              all co-ords are relative to the center -->
          <g transform='translate(50,50)'>
            <circle class='clock-face' r='48'/>
            ${minuteTicks}
            ${hourTicks}
            <!-- hour hand -->
            <line class='hour' y1='2' y2='-20'
              transform='rotate(${ 30 * this.date.getHours() + this.date.getMinutes() / 2 })'/>
            <!-- minute hand -->
            <line class='minute' y1='4' y2='-30'
              transform='rotate(${ 6 * this.date.getMinutes() + this.date.getSeconds() / 10 })'/>
            <!-- second hand -->
            <g transform='rotate(${ 6 * this.date.getSeconds() })'>
              <line class='second' y1='10' y2='-38'/>
              <line class='second-counterweight' y1='10' y2='2'/>
            </g>
          </g>
        </svg>
      </div>
    `;

Workaround # 1

• Surround parts with <g>...</g> tags to avoid i18n-format conversion

  html`${bind(this, 'lit-clock')}
    <div class='square'> <!-- so the SVG keeps its aspect ratio -->
      <svg viewBox='0 0 100 100'>
        <!-- first create a group and move it to 50,50 so
            all co-ords are relative to the center -->
        <g transform='translate(50,50)'>
          <circle class='clock-face' r='48'/>
          <g>${minuteTicks}</g><!-- g tag to avoid i18n-format conversion -->
          <g>${hourTicks}</g><!-- g tag to avoid i18n-format conversion -->
          <!-- hour hand -->
          <line class='hour' y1='2' y2='-20'
            transform='rotate(${ 30 * this.date.getHours() + this.date.getMinutes() / 2 })'/>
          <!-- minute hand -->
          <line class='minute' y1='4' y2='-30'
            transform='rotate(${ 6 * this.date.getMinutes() + this.date.getSeconds() / 10 })'/>
          <!-- second hand -->
          <g transform='rotate(${ 6 * this.date.getSeconds() })'>
            <line class='second' y1='10' y2='-38'/>
            <line class='second-counterweight' y1='10' y2='2'/>
          </g>
        </g>
      </svg>
    </div>
  `;

Workaround # 2

• Convert inline <svg> elements into svg tagged template literals

  html`${bind(this, 'lit-clock')}
    <div class='square'> <!-- so the SVG keeps its aspect ratio -->
      ${svg`<svg viewBox='0 0 100 100'>
        <!-- first create a group and move it to 50,50 so
            all co-ords are relative to the center -->
        <g transform='translate(50,50)'>
          <circle class='clock-face' r='48'/>
          ${minuteTicks}
          ${hourTicks}
          <!-- hour hand -->
          <line class='hour' y1='2' y2='-20'
            transform='rotate(${ 30 * this.date.getHours() + this.date.getMinutes() / 2 })'/>
          <!-- minute hand -->
          <line class='minute' y1='4' y2='-30'
            transform='rotate(${ 6 * this.date.getMinutes() + this.date.getSeconds() / 10 })'/>
          <!-- second hand -->
          <g transform='rotate(${ 6 * this.date.getSeconds() })'>
            <line class='second' y1='10' y2='-38'/>
            <line class='second-counterweight' y1='10' y2='2'/>
          </g>
        </g>
      </svg>`}
    </div>
  `;