样式化 webkit/chrome 上音频元素中的 shadow-dom 元素

如何解决样式化 webkit/chrome 上音频元素中的 shadow-dom 元素

背景：我正在尝试解决 Chrome 中音频元素外观的两个烦恼，在尝试这样做时，我遇到了两个我想更好地理解的问题。这是关于 MacOS 上的 Chrome 89。我使用伪选择器很好地管理了音频元素内部的样式。当使用 dom 检查器查看 shadow 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>

正如预期的那样。为什么我无法设置第一个字母的样式？ （这样做的想法是去除剩余时间显示中最烦人的前导/符号）。

问题 2：

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

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

我认为与上述颜色样式起作用的其他情况没有区别。 （这样做的想法是增加轨道段两个部分之间过小的对比度。）

附加：我设法使用

改善了对比度

audio::-webkit-media-controls-timeline {-webkit-filter: brightness(2.5);}

但问题仍然是为什么一种方法有效而另一种方法无效。

解决方法

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

shadowDOM 有两种类型

• 我们称之为 "userland" shadowDOM，
  由（第 3 方开发者）自定义元素/网络组件创建的（开放或封闭的）shadowDOM

  此类型自 W3C Web 组件标准实施以来可用

• “user-agent” 由每个浏览器（供应商）创建的 shadowDOM，
  实现 input,audio,video,select 等标签
  但每个浏览器可以有不同的实现。

  

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

  WebKit 确实有一些伪选择器来改变一些设置
  请参阅：Is it possible to style html5 audio tag?

  但它们不是通过创建复杂的选择器来让您完全访问 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 组件替换标准的 ，让您在所有浏览器中设置样式

注意符号：(open) not (user-agent)