在 webkit / chrome 上的音频元素中设置 shadow-dom 元素的样式
Styling shadow-dom elements in audio element on webkit / chrome
背景： 我正在尝试修复 Chrome 中音频元素外观的两个烦恼，在尝试这样做时我遇到了两个问题喜欢更好地理解。这大约是 MacOS 上的 Chrome 89。我很好地设法使用伪选择器在音频元素内设置样式。当使用 dom 检查器查看阴影 dom 的内部时，找出伪选择器的名称非常有用。例如，以下两个规则完全符合预期：
::-webkit-media-controls-timeline {background-color:pink;}
audio::-webkit-media-controls-time-remaining-display {background-color:lightgrey;}
问题：但是，有两件事没有按预期工作，我想了解原因。
问题 1： 对剩余显示中的第一个字母设置样式 div 不起作用。以下规则无效。
audio::-webkit-media-controls-time-remaining-display:first-letter {color:white;}
这太惊人了，因为浏览器会显示这个
<style>div:first-letter {color:red;}</style> ... <div>e xample</div>
符合预期。为什么我无法设置第一个字母的样式？ （这样做的想法是摆脱剩余时间显示中最烦人的前导/符号）。
问题二：
为什么我无法在阴影的不同部分设置具有不同伪属性的元素的样式 DOM。更准确地说，以下规则无效：
::-internal-track-segment-highlight-before {background-color: blue;}
我认为与上面颜色样式有效的其他情况没有区别。 （这样做的想法是为了增加轨道段两部分之间太小的对比度。）
补充：我使用
设法稍微改善了对比度
audio::-webkit-media-controls-timeline {-webkit-filter: brightness(2.5);}
但问题仍然是为什么一种方法有效而另一种方法无效。
您正在使用 Chrome，并启用了“显示用户代理影子 DOM”
有两种阴影DOM
我们称它为"userland" shadowDOM,
由（第 3 方开发人员）自定义 Element/Web 组件
创建的（打开或关闭）影子DOM
此类型自 W3C Web 组件标准 实施以来可用
"user-agent" shadowDOM 由每个浏览器（供应商）创建，
实现 input , audio , video, select 等标签
但是每个浏览器都可以有不同的实现。
此阴影DOM 内容只有在浏览器供应商启用访问权限时才能访问。 （使用 shadowParts 或相关技术）
而且一般是访问不到的
WebKit 确实有一些伪 选择器可以更改一些 设置
参见：Is it possible to style html5 audio tag?
但它们不是 CSS 选择器，可以通过创建复杂的选择器让您 完全访问 影子DOM。
一些字体和样式设置级联成阴影DOM只是为了在整个页面中具有一致的样式。
参见：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 组件 替换标准 ，让你在 所有 浏览器中设置样式
注意符号：(open) 不是 (user-agent)
背景： 我正在尝试修复 Chrome 中音频元素外观的两个烦恼，在尝试这样做时我遇到了两个问题喜欢更好地理解。这大约是 MacOS 上的 Chrome 89。我很好地设法使用伪选择器在音频元素内设置样式。当使用 dom 检查器查看阴影 dom 的内部时，找出伪选择器的名称非常有用。例如，以下两个规则完全符合预期：
::-webkit-media-controls-timeline {background-color:pink;}
audio::-webkit-media-controls-time-remaining-display {background-color:lightgrey;}
问题：但是，有两件事没有按预期工作，我想了解原因。
问题 1： 对剩余显示中的第一个字母设置样式 div 不起作用。以下规则无效。
audio::-webkit-media-controls-time-remaining-display:first-letter {color:white;}
这太惊人了，因为浏览器会显示这个
<style>div:first-letter {color:red;}</style> ... <div>e xample</div>
符合预期。为什么我无法设置第一个字母的样式？ （这样做的想法是摆脱剩余时间显示中最烦人的前导/符号）。
问题二：
为什么我无法在阴影的不同部分设置具有不同伪属性的元素的样式 DOM。更准确地说，以下规则无效：
::-internal-track-segment-highlight-before {background-color: blue;}
我认为与上面颜色样式有效的其他情况没有区别。 （这样做的想法是为了增加轨道段两部分之间太小的对比度。）
补充：我使用
设法稍微改善了对比度audio::-webkit-media-controls-timeline {-webkit-filter: brightness(2.5);}
但问题仍然是为什么一种方法有效而另一种方法无效。
您正在使用 Chrome，并启用了“显示用户代理影子 DOM”
有两种阴影DOM
我们称它为"userland" shadowDOM,
创建的（打开或关闭）影子DOM
由（第 3 方开发人员）自定义 Element/Web 组件此类型自 W3C Web 组件标准 实施以来可用
"user-agent" shadowDOM 由每个浏览器（供应商）创建，
实现input,audio,video,select等标签
但是每个浏览器都可以有不同的实现。此阴影DOM 内容只有在浏览器供应商启用访问权限时才能访问。 （使用 shadowParts 或相关技术） 而且一般是访问不到的
WebKit 确实有一些伪 选择器可以更改一些 设置
参见：Is it possible to style html5 audio tag?但它们不是 CSS 选择器，可以通过创建复杂的选择器让您 完全访问 影子DOM。
一些字体和样式设置级联成阴影DOM只是为了在整个页面中具有一致的样式。
参见：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 组件 替换标准 ，让你在 所有 浏览器中设置样式
注意符号：(open) 不是 (user-agent)