在webkit/chrome上设计音频元素中的shadow-dom元素

Question

背景：我正在尝试修复Chrome中音频元素外观上的两个烦恼，在尝试这样做时，我遇到了两个问题，我想更好地理解。这是关于MacOS上的Chrome 89。我很好地管理了音频元素内部的样式，使用伪选择器。当使用dom检查器查看影子dom内部时，找出伪选择器的名称会很好地工作。例如，以下两个规则完全按照预期工作：

::-webkit-media-controls-timeline{background-color：pink；}audio::-webkit-media-controls-time-raying-display{background-color：lightgrey；}

问题：然而，有两件事并不像预期的那样起作用，我想知道为什么。

问题1：样式化剩余显示div中的第一个字母不起作用。以下规则无效。

audio::-webkit-media-controls-time-relaying-display：first-letter{color：white；}

这是令人吃惊的，因为浏览器会显示

...

E Xample

正如所料。为什么我不能给第一个字母打字？（这样做的想法是为了去掉剩余时间显示中最烦人的前导/符号）。

问题2：

为什么我不能在阴影DOM的不同部分为具有不同伪属性的元素设置样式。更确切地说，以下规则是无效的：

::-internal-track-segment-highlight-before{background-color：blue；}

我看不出与上面的另一个情况有什么不同，在这里颜色样式起作用。（这样做的想法是为了增加轨道段两部分之间太小的对比度。）

补充一下：我设法改进了一点对比度，使用

音频：：-webkit-media-controls-timeline{-webkit-filter：brightence（2.5）；}

但问题仍然是为什么一种方法有效而另一种方法不起作用。

Answer 1

您正在使用Chrome，并打开了“显示用户代理阴影DOM”

有两种类型的暗影场

>

让我们将其称为“用户区”shadowDOM,
由（第三方开发人员）自定义元素/Web组件创建的（打开或关闭的）shadowDOM

自从W3C Web组件标准实现以来，这种类型就可用了

由每个浏览器（供应商）创建的“用户代理”shadowDOM,
实现输入、音频、视频、选择等标记,但每个浏览器可以有不同的实现。

只有浏览器供应商启用了访问，才能访问此shadowDOM内容。（使用暗影部件或相关技术），而且一般情况下它是无法访问的。

WebKit确实有一些伪选择器来更改一些设置
请参见：是否有可能对html5音频标记进行样式化？

但它们不是通过创建复杂的选择器使您完全访问shadowDOM的CSS选择器。

某些字体和样式设置会级联到shadowDOM中，以便在整个页面中具有一致的样式。
请参阅:https://lamplightdev.com/blog/2019/03/26/why-is-my-web-component-inheriting-styles/

这就是为什么color:red可以工作，而:first-letter不行的原因

这就是filter起作用的原因；而background-color不

备选方案

https://github.com/dascritch/cpu-audio是一个不错的普通Web组件，它取代了标准的

请注意符号:（打开）而不是（用户代理）