How to retain tag casing when using document.createElement()?

Question

I need to dynamically insert some tags into the <filter> element of an <svg>. The tags in question have camelCased tag name, and also use some attributes with camelCased names.

When I use document.createElement('feDiffuseLighting') I would expect the created element to be <feDiffuseLighting> but instead it is created as ``` - all lower case.

Normally I would think that this wouldn't matter, however it actually seems to matter! See my example below. Inspect the elements and you'll see they are identical except for casing. In the dev tools if you right click and select "Edit as HTML" and manually change the casing to camelCase, you'll see the SVG appear as expected.

How can I get document.createElement to respect thecasing I defined? Or is there some other way to create an element with the proper casing?

const diffuseLightingEl = document.createElement('feDiffuseLighting');
diffuseLightingEl.setAttribute('in', 'noise2');
diffuseLightingEl.setAttribute('lighting-color', '#ffffff');
diffuseLightingEl.setAttribute('surfaceScale', '2');

const distantLightEl = document.createElement('feDistantLight');
distantLightEl.setAttribute('azimuth', '45');
distantLightEl.setAttribute('elevation', '60');

diffuseLightingEl.appendChild(distantLightEl);
document.querySelector('#noise-filter2').appendChild(diffuseLightingEl)

body{height: 100vh;margin:0; display:flex; align-items:stretch; gap:1rem;}
body div{flex:1;}
svg{height: 100%; width: 100%;}

<div>
  <strong>Element Manually Added</strong>
  <svg>
    <filter id="noise-filter1">
      <feTurbulence stitchTiles="stitch" result="noise1" baseFrequency="0.519" numOctaves="5" type="fractalNoise" seed="0"></feTurbulence>
      <feDiffuseLighting in="noise1" lighting-color="#ffffff" surfaceScale="2">
        <feDistantLight azimuth="45" elevation="60"></feDistantLight>
      </feDiffuseLighting>
    </filter>

    <rect x="0" y="0" width="100%" height="100%" filter="url(#noise-filter1)" fill="none"></rect>
  </svg>
</div>

<div>
  <strong>Element Dynamically Added</strong>
  <svg>
    <filter id="noise-filter2">
       <feTurbulence stitchTiles="stitch" result="noise2" baseFrequency="0.519" numOctaves="5" type="fractalNoise" seed="0"></feTurbulence>
    </filter>

    <rect x="0" y="0" width="100%" height="100%" filter="url(#noise-filter2)" fill="none"></rect>
  </svg>
</div>