◆ hidden 属性の非表示は display:none がデフォルトスタイルになってるだけ
◆ display: flex など指定したら負けるので表示されてしまう
◆ display:none に important をつけたスタイルを自分で設定しておけば大丈夫

個別要素を非表示にするときは HTML で非表示にしたい要素に hidden 属性をつけておきます

<div hidden>
あいうえお
</div>

JavaScript で操作するなら hidden プロパティを true にするのが簡単です
このプロパティは属性に対応してるので hidden 属性が付きます

display に負ける

hidden 属性があると非表示になります
しかし これはブラウザデフォルトのスタイルで 「display: none」 が hidden 属性に対してつけられているだけです
そのため CSS の優先度が低いです

「display: flex」 などが指定されていれば非表示になりません

<style>
.list-item{
display: flex;
}
</style>

<div class="list-item">
<div>1</div>
<div>2</div>
</div>
<div class="list-item" hidden>
<div>3</div>
<div>4</div>
</div>

こういう風にクラス側で display が設定されてることは多いと思います
hidden 属性をつけてる以上非表示を優先してほしいのに表示されてしまいます

display が表示と非表示の切り替えだけじゃなく block や inline 等の表示方法も含んでいるので仕方ないです
なので自分で hidden 属性を非表示にするように強めのスタイルを指定します
表示させるなら hidden 属性を外すべきなので特に強くなるように important を指定します

[hidden] {display: none!important;}