Shadow DOM のスタイルは原則として外部へ漏れない。外部から内部の一部をスタイルする必要があるときは ( A ) 擬似要素で公開部品を指定するか、スロット経由の子には ( B ) 擬似クラス（セレクタ）を使う。
解答
A: ::part
B: ::slotted()
解説
コンポーネント側で part 属性を付与すると、利用側は ::part(name) でスタイル可能。スロットに入るライト DOM の要素には ::slotted(selector) を使って限定的にスタイルを当てられます。
使用例（サンプルコード）
[ html ]
<x-badge><span class="txt">Hi</span></x-badge>
<style>
x-badge::part(label){ background: gold; } /* 公開パートを外から装飾 */
x-badge::slotted(.txt){ text-transform: uppercase; } /* スロット経由の子 */
</style>
<script>
customElements.define('x-badge', class extends HTMLElement{
constructor(){
super();
const r = this.attachShadow({mode:'open'});
r.innerHTML = `
<style>.wrap{padding:4px;border-radius:4px}</style>
<span class="wrap" part="label"><slot></slot></span>`;
}
});
</script>