JavaScript で大量の <my-li> 生成は、【+=】か【createElement】か？

Question

知りたいこと

<li> の場合なら【createElement】よりも速い【+=】を使うべき [※1] だが、ではカスタム要素 <my-li> ではどうすべきか？

疑問の詳細

<my-li> も 🚗速い のは【+=】でしょうけれど、しかし文字列では HTML 生成にあたって必要な値をデータ属性で渡さねばならず、 ❌無駄なデータ属性 を持つことになってしまいます。

【+=】の場合

例えば以下は user.name を <my-li> の中に表示するため、わざわざ data-name にも渡さねばならず、HTMLとしては ❌無駄なデータ属性 が必要になります。（しかし 🚗速い というメリットがあります。）

import htmlTemplates from "./htmlTemplates.js"

class MyLi extends HTMLElement {
    constructor() {
        super();
    }

    connectedCallback() {
        this.name = this.dataset.name;
        this.render();
    }

    render() {
        this.replaceChildren();

        this.insertAdjacentHTML(
            "beforeend",
            htmlTemplates.userBox(this.name)
        );
    }
}

const users = [
    {name: "taro"}
];

const container = document.createElement('ul');

foreach (users as user) {
    html += `
        <my-li data-name="${user.name}"> <!-- ❌無駄なデータ属性 -->
        </my-li>`;
}
container.insertAdjacentHTML('beforeend', html); // 🚗速い

【createElement】の場合

こちらは createElement() したオブジェクトに対して user.name を ✅自然にセット しており、その値を userBox() に渡すことができるので、上記【+=】のように ❌無駄なデータ属性 が不要になります。（しかし 🐢遅い というデメリットがあります。）

import htmlTemplates from "./htmlTemplates.js"

class MyLi extends HTMLElement {
    constructor() {
        super();
    }

    connectedCallback() {
        this.render();
    }

    render() {
        this.replaceChildren();

        this.insertAdjacentHTML(
            "beforeend",
            htmlTemplates.userBox(this.name)
        );
    }
}

const users = [
    {name: "taro"}
];

const container = document.createElement('ul');
foreach (users as user) {
    const myLi = document.createElement('my-li');
    myLi.name = user.name; // ✅自然にセット
    container.appendChild(myLi); // 🐢遅い
}

ということで、

無駄な値を許容しても、速度を優先すべきなのか？
無駄な値を排除して、速度を犠牲にすべきなのか？

ついてのご意見を募集させてください。（明確な正解があるか否かわからないため、質問でなく意見交換として投稿させて頂きました。）

もちろん、いずれよりも優れた正解があればぜひそれについてもご回答を募集しております。

補足

冒頭の [※1] については以下を試し、どうやら【createElement】より【+=】の方が速いっぽいという判断です。
（尚 createDocumentFragment() はめちゃ遅かったです。）

テストコード

https://jsfiddle.net/k39f1j8L/

// テスト用のコンテナを作成
const container = document.createElement('ul');
document.body.appendChild(container);

// 10000件のアイテムを生成するためのテスト
const totalItems = 100000;

// insertAdjacentHTML を使用する場合
function testInsertAdjacentHTML() {
  const start = performance.now(); // 開始時刻

  let html = '';
  for (let i = 0; i < totalItems; i++) {
    html += `<li>【+=】${i}</li>`;
  }

  container.insertAdjacentHTML('beforeend', html); // 一括で挿入

  const end = performance.now(); // 終了時刻
  console.log('insertAdjacentHTML elapsed time: ', end - start, 'ms');
}

// createElement を使用する場合
function testCreateElement() {
  const start = performance.now(); // 開始時刻

  for (let i = 0; i < totalItems; i++) {
    const li = document.createElement('li');
    li.textContent = `【createElement】${i}`;
    container.appendChild(li); // 1件ずつ挿入
  }

  const end = performance.now(); // 終了時刻
  console.log('createElement elapsed time: ', end - start, 'ms');
}

// テスト実行
testInsertAdjacentHTML();
testCreateElement();