ShadowRoot のならその ShadowDOM の中で良いけど Document に設定したならすべての ShadowRoot にも反映して欲しい
ドキュメントなんだからコンポーネントも含めてグローバルでいいと思う
WebComponents 使ってると body 直下にルートコンポーネントを置いて ShadowRoot 外の要素なんてないことが普通
それだと Document に対する adoptedStyleSheets なんていらないし

一応こういう風に document.adoptedStyleSheets を継承させるベースクラスを作っておくことはできるけど毎回は面倒

class CustomHTMLElement extends HTMLElement {
	constructor() {
		super()
		this.attachShadow({ mode: "open" }).adoptedStyleSheets = [
			...document.adoptedStyleSheets,
			this.cssstylesheet,
		]
	}

	static css = ``

	get cssstylesheet() {
		if (!this.constructor.cssstylesheet) {
			const cssss = new CSSStyleSheet()
			cssss.replaceSync(this.constructor.css)
			this.constructor.cssstylesheet = cssss
		}
		return this.constructor.cssstylesheet
	}
}

使用例⇩

const cssss = new CSSStyleSheet()
cssss.replaceSync(`
	button { background: black; color: white; border: 0; border-radius; 5px; padding: 3px 15px; }
`)
document.adoptedStyleSheets = [cssss]

customElements.define("ex-ample", class extends CustomHTMLElement {
	static css = "button:hover { background: darkgray; }"

	constructor() {
		super()
		this.shadowRoot.innerHTML = `<button>in component</button>`
	}
})

document.body.innerHTML = `
	<button>in document</button>
	<ex-ample></ex-ample>
`