将伪元素应用于阴影元素

Question

我正在尝试使用 CSS 将自定义滚动条样式添加到模式中，但它不起作用，并且默认的滚动条样式仍然存在。

.modal::-webkit-scrollbar {
  background-color: #fff;
  width: 16px;
  overflow: auto;
} /* SUB background of the scrollbar except button or resizer */
.modal::-webkit-scrollbar-track {
  background-color: #fff;
} /* SUB scrollbar itself */
.modal::-webkit-scrollbar-thumb {
  background-color: #babac0;
  border-radius: 16px;
  border: 4px solid #fff;
} /* SUB set button(top and bottom of the scrollbar) */
.modal::-webkit-scrollbar-button {
  display: none;
} 

我可以看到浏览器正在检测伪元素（参见图像黄色箭头），但由于某种原因它们没有被应用到模态（红色箭头）

我只能认为这可能是因为模态具有来自影子 DOM 的元素（绿色箭头）。我对此的经验很少。这可能是原因吗？这是 x-modal 组件的代码片段：

// js/common/overlay/modal.js
import { animate as animate5, timeline as timeline2 } from "vendor";
var Modal = class extends DialogElement {
  connectedCallback() {
    super.connectedCallback();
    this.setAttribute("aria-modal", "true");
  }
  get shadowDomTemplate() {
    return this.getAttribute("template") || "modal-default-template";
  }
  get shouldLock() {
    return true;
  }
  get shouldAppendToBody() {
    return true;
  }
  createEnterAnimationControls() {
    if (matchesMediaQuery("sm")) {
      return animate5(this, { opacity: [0, 1] }, { duration: 0.2 });
    } else {
      return timeline2([
        [this.getShadowPartByName("overlay"), { opacity: [0, 1] }, { duration: 0.3, easing: [0.645, 0.045, 0.355, 1] }],
        [this.getShadowPartByName("content"), { transform: ["translateY(100%)", "translateY(0)"] }, { duration: 0.3, easing: [0.645, 0.045, 0.355, 1], at: "<" }]
      ]);
    }
  }
  createLeaveAnimationControls() {
    if (matchesMediaQuery("sm")) {
      return animate5(this, { opacity: [1, 0] }, { duration: 0.2 });
    } else {
      return timeline2([
        [this.getShadowPartByName("overlay"), { opacity: [1, 0] }, { duration: 0.3, easing: [0.645, 0.045, 0.355, 1] }],
        [this.getShadowPartByName("content"), { transform: ["translateY(0)", "translateY(100%)"] }, { duration: 0.3, easing: [0.645, 0.045, 0.355, 1], at: "<" }]
      ]);
    }
  }
};
if (!window.customElements.get("x-modal")) {
  window.customElements.define("x-modal", Modal);

.modal {
  --background: var(--modal-background);
  --text-color: var(--modal-text);
  --border-color: var(--modal-border-color);
  --distance-to-bleed: var(--modal-body-padding-inline);
  --modal-header-padding-block: .875rem;
  --modal-header-padding-inline: 1.25rem;
  --modal-body-padding-block: 1.25rem;
  --modal-body-padding-inline: 1.25rem;
  --modal-body-max-width: 30rem;
}

.modal::part(base) {
  height: 100%;
  width: 100%;
  place-items: end center;
  display: grid;
  position: fixed;
  inset: 0;
}

.modal::part(content) {
  width: 100%;
  max-width: var(--modal-body-max-width);
  max-height: 75vh;
  background: rgb(var(--background));
  color: rgb(var(--text-color));
  isolation: isolate;
  overflow: auto;
}

@supports (height: 100dvh) {
  .modal::part(content) {
    max-height: 85dvh;
  }
}

.modal::part(header) {
  background: inherit;
  border-block-end: 1px solid rgb(var(--border-color));
  text-align: center;
  z-index: 2;
  align-items: center;
  padding-block-start: var(--modal-header-padding-block);
  padding-block-end: var(--modal-header-padding-block);
  padding-inline-start: var(--modal-header-padding-inline);
  padding-inline-end: var(--modal-header-padding-inline);
  display: grid;
  position: sticky;
  inset-block-start: 0;
}

.modal::part(close-button) {
  position: absolute;
  inset-inline-end: var(--modal-header-padding-inline);
}

.modal::part(body) {
  padding-block-start: var(--modal-body-padding-block);
  padding-block-end: var(--modal-body-padding-block);
  padding-inline-start: var(--modal-body-padding-inline);
  padding-inline-end: var(--modal-body-padding-inline);
}

<x-modal id="modal-b02ffcb2-0131-4857-bb08-3e85373d0853" class="modal modal--lg" role="dialog" aria-modal="true" open style="display: block; opacity: 1;">

#shadow-root (open)

<div part="base">
    <div part="overlay" style="opacity: 1;"></div>
    <div part="content" style="transform: translateY(0px);">
      <header part="header">
        <slot name="header"></slot>
        <button type="button" is="dialog-close-button" part="close-button tap-area" aria-label="Close">close</button>
      </header>
      <div part="body">
        <slot></slot>
      </div>
    </div>
  </div>
                <span class="h5" slot="header">title</span>
                <div class="prose"><p>hello world</p></div>
              </x-modal>

有没有办法将 css 应用于此模式以添加自定义滚动条？

预先感谢您的任何帮助/回复。

Answer 1

这里是 Chromium Bug 报告：https://bugs.chromium.org/p/chromium/issues/detail?id=1302852