in Firefox querySelector with attribute while finding path in svg gives error

My code is working well in Chrome but not in Firefox.

When I search path element using querySelector with attribute Firefox gives an error that path is not found.

defs.appendChild(svgGradient);
const path = this.#svg.querySelector(`[ElementName="${this.#name}"]`);
path.setAttribute("fill", `url(#${gradientId})`);

When I searched the path with id I was able to find the path. So I suspect the in Firefox query with attribute tag is not support or have I made a mistake, can anyone correct me?

Below is the error I get

Uncaught TypeError: path is null
    fillGradient texture.js:144
    Texture texture.js:60
    emit events.js:153
    setListeners gradient.js:207
texture.js:144

this.#svg contains svg markup and #name is identifier for selected part.

Running a quick test, I found that both Chrome and Firefox are interpreting the attribute as lowercase elementname.

console.log(document.querySelector('svg').innerHTML);

<svg><path ElementName="foo" /></svg>

While Chrome is able to query the element using any case, Firefox requires a strict match

const svg = document.querySelector('svg');
['ElementName', 'elementname', 'ElEmEnTnAmE'].forEach((attr) => {
  console.log(attr, svg.querySelector(`[${attr}]`) !== null);
});

<svg><path ElementName="foo" /></svg>

In Chrome, these are all true but Firefox only matches elementname.

I would recommend normalising your custom attributes to lowercase / kebab-case, eg

<path element-name="foo" />