如何在元素本身内设置自定义元素滚动条的样式

Question

我有一个简单的自定义元素，我在 light DOM 中使用 ::-webkit-scrollbar 系列伪元素对其滚动条进行了样式设置。

customElements.define(
  'my-element',
  class extends HTMLElement {
    connectedCallback() {
      this.attachShadow({mode: 'open'})
        .innerHTML = `
        <style>
            :host {
                display: block;
                overflow: scroll;
            }
        </style>
        <slot></slot>`
    }
  }
)

my-element {
  width: 50vw;
  height: 30vh;
  border: 4px solid green;
}
p {
  border: 4px solid red;
  width: 75vw;
}

my-element::-webkit-scrollbar {
  block-size: 1rem;
}
my-element::-webkit-scrollbar-track {
  background-color: black
}
my-element::-webkit-scrollbar-thumb {
  background-color: red;
}

<my-element>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam iste esse eum molestias dolore fuga cupiditate! Ducimus est omnis ipsum aperiam, esse beatae dolorum repudiandae veritatis delectus labore dignissimos ratione!</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam iste esse eum molestias dolore fuga cupiditate! Ducimus est omnis ipsum aperiam, esse beatae dolorum repudiandae veritatis delectus labore dignissimos ratione!</p>
  <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vitae sunt vel dignissimos mollitia explicabo? Praesentium tempore nesciunt possimus non ex. Fugit, distinctio! Animi magni debitis totam est neque quia et?</p>
</my-element>

但是，我需要能够将 light DOM 滚动条样式移动到元素本身中，大概使用 Shadow dom。我尝试过添加

::-webkit-scrollbar {
    block-size: 1rem;
}
::-webkit-scrollbar-track {
    background-color: black
}
::-webkit-scrollbar-thumb {
    background-color: red;
}

阴影 dom 的样式，但滚动条没有样式。我打赌我需要一些选择器魔法！

那么我需要做什么？