使用 document.createElement() 时如何保留标签大小写？

Question

我需要动态地将一些标签插入到

<filter>

的

<svg>

元素中。有问题的标签具有驼峰式标签名称，并且还使用一些具有驼峰式名称的属性。

当我使用

document.createElement('feDiffuseLighting')

时，我希望创建的元素为

<feDiffuseLighting>

但它被创建为 ``` - 全部小写。

通常我会认为这并不重要，但实际上它似乎很重要！请参阅下面我的示例。检查这些元件，您会发现除了外壳之外它们都是相同的。在开发工具中，如果右键单击并选择“编辑为 HTML”并手动将大小写更改为驼峰式，您将看到 SVG 按预期显示。

我怎样才能让

document.createElement

尊重我定义的外壳？或者是否有其他方法来创建具有正确大小写的元素？

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>