innerHTML добавляет символы =""

В одном из методов приложения используется следующий код:

var tpl = document.createElement('template');
tpl.innerHTML = text;

Где text содержит следующее значение (в строковом виде):

<nf-form form-title="Тестовая форма">
    <nf-input>
        <nf-input-mask scale="2" max-year="2099" min-year="1899" mask="N" map-to-radix="[".", ","]" thousands-separator=" " min="-1000" max="1000"></nf-input-mask>
    </nf-input>
</nf-form>

После добавления text'а в качестве содержимого, тег <template> выглядит так:

<nf-form form-title="Тестовая форма">
    <nf-input>
        <nf-input-mask scale="2" max-year="2099" min-year="1899" mask="N" map-to-radix="[" .",="" ","]"="" thousands-separator=" " min="-1000" max="1000"></nf-input-mask>
    </nf-input>
</nf-form>

Как можно заметить, в содержимом template'а появились символы ="".

Хотелось бы узнать, из-за чего такое произошло, и как это можно предотвратить?