Minimize the output HTML

[yamatoiizuka]

固定の style は CSS を一度だけ読み込むようにするなど。

as is:

<span class="typeset" style="word-break: keep-all; overflow-wrap: anywhere;">...</span>

to be

<span class="typeset">...</span>

.typeset {
  word-break: keep-all; 
  overflow-wrap: anywhere;
}

Web コンポーネントもありえそう。
見通しも良くなるし、option 値を下層まで伝えずに済むのでいいかもしれない。

as is:

<span class="typeset" style="word-break: keep-all; overflow-wrap: anywhere;"><span class="typeset-latin">Text</span><span class="typeset-thin-space" style="font-size: 50%; user-select:none;" aria-hidden="true" data-nosnippet="">&thinsp;</span></span>

to be

<!-- typeset-thinsp は ::after 擬似要素などで &thinsp; を出力する -->
<typeset-wrapper><typeset-latin>Text</typeset-latin><typeset-thinsp></typeset-thinsp></typeset-wrapper>

[yamatoiizuka]

Node.js 環境では Web コンポーネントの扱いがややこしいので、
Web コンポーネントライブラリである Lit を試したが、
最終的なバンドルサイズが 50kb 程度と約2倍になってしまったため、泣く泣く断念。

Lit 自体はいいライブラリだと思った。