Стильные специфические сигналы WebVTT

Question

Я немного углубился в тонкости HTML5 и поиграл с видео API.

Во всяком случае, я прочитал, что формат WebVTT позволяет применять правила CSS к сигналам, отображаемым на видео, благодаря ::cue Псевдо-элемент.

Теоретически вы могли бы написать эти правила непосредственно в файле WebVTT, но это еще не было стандартизировано, поэтому ни один крупный браузер не реализует эту функцию на данный момент. Чтобы обойти это ограничение, можно написать правила CSS вне файла WebVTT, например, в стиле документа HTML:

const vtt = `WEBVTT

intro
00:00:00.000 --> 00:00:05.000
Goodbye Moon

intro
00:00:05.000 --> 00:00:10.000
Hello Sun
`;

document.addEventListener("DOMContentLoaded", () => {
  const track = document.getElementById("track");
  track.src = "data:text/plain,"+encodeURIComponent(vtt);
});

video::cue {
  font-family: Georgia, serif;
  font-size: 20px;
  letter-spacing: -1.6px;
  word-spacing: 0.8px;
  color: white;
  text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
  font-variant: small-caps;
  text-transform: capitalize;
  background-color: transparent;
}

<video id="video" width="60%" controls src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4">
  <track default id="track" />
</video>

API также предлагает способ стилизации сигналов, которые соответствуют определенному идентификатору, например, такой: ::cue(#intro), Это также позволило бы стилизовать реплики с определенным оформлением шрифта, например, все жирные реплики: ::cue(b), Но эти два селектора не работают ни в одном браузере, даже с трюком, который я дал ранее.

Не имея правильной реализации, я не могу найти обходного пути для стилизации конкретной реплики, потому что реплики не существуют в DOM, поэтому я не могу использовать селекторы CSS.

Если решение существует, я могу принять его, если оно подразумевает использование объектов JavaScript, таких как TextTrack или VTTCue.

Спасибо за помощь.