◆ コンポーネントというなら動作を設定できたほうがいい
◆ そこ専用なのに各種設定が固定だとイマイチ感

コンポーネントにせずページ内にある機能の一部だったらそこ専用のものだしとあまり汎用化とか考えずに済みます
ただ機能が色々混ざってくるとメンテのしづらさがでてくるのである程度複雑になると独立してるような部分はコンポーネント化してしまいたいものです

ただコンポーネントにしてしまうとそこ専用のものになるとなんかイマイチ感が出てきます
固定にしてる部分はどれもプロパティや属性で外部から設定できるようになってないとコンポーネントらしさが足りないです
input や select などブラウザ標準コンポーネントを見ても こういうオプションがあったらなぁと思う部分はあるわけで コンポーネントとしてすべて設定できないといけないというわけでもないのですけどね

最近の例だとこういうのです
console を見れない環境でもログを表示したくて作ったもので log 関数を用意して 呼び出すと画面上にログを表示するものです
それを コンポーネントにまとめました

customElements.define("log-window", class extends HTMLElement {
constructor() {
super()
this.attachShadow({mode: "open"}).innerHTML = `
<style>
:host {
border: 2px solid aqua;
padding: 10px;
width: 300px;
}
.item {
overflow: hidden;
font-size: 12px;
font-family: monaco;
}
</style>
<div class="container"></div>
`
this._container = this.shadowRoot.querySelector(".container")
}

add(text) {
const d = document.createElement("div")
d.className = "item"
const time = new Date().toLocaleTimeString()
d.textContent = `[${time}] ${text}`
this._container.prepend(d)

// delay delete
setTimeout(() => {
const anim = d.animate([
{ height: d.clientHeight + "px", opacity: 1 },
{ height: 0, opacity: 0 }
], {
duration: 300,
easing: "ease",
})
anim.onfinish = () => d.remove()
}, 4000)
}

clear() {
this._container.innerHTML = ""
}
})

幅やフォントやサイズは固定です
CSS のカスタムプロパティとか用意しておくほうが親切です

長くなると見づらいので 一定時間でアニメーションで消えるようにしています
消えるまでの時間やアニメーション時間の固定で指定はできません
消さないオプションもありません

こういうのを考え出すと コンポーネント疲れが出てきます