javascript -/deep/combinator video range blue css 显示不正确

Question

我正在尝试使用/deep/组合器让我的视频控件上的范围显示为蓝色。目前没有任何变化。我是否犯了任何人都注意到的语法错误？我正在使用 Chrome 来正常工作。

http://plnkr.co/edit/Qyjb1Q33DoFGSdUVLv9p?p=preview

var CarList = Object.create(HTMLElement.prototype);
      
      CarList.createdCallback = function() {
        var template = document.querySelector('#car');
        var templateClone = document.importNode(template.content, true);
        this.createShadowRoot().appendChild(templateClone);
      }
      
      document.registerElement('car-list', {
        prototype: CarList
      });
      
      var DealerList = Object.create(HTMLElement.prototype);
      
      //Nested Custom Element
      DealerList.createdCallback = function() {
        var template = document.querySelector('#dealer');
        var templateClone = document.importNode(template.content, true);
        this.createShadowRoot().appendChild(templateClone);
      }
      
      document.registerElement('dealer-list', {
        prototype: DealerList
      });

car-list /deep/ li {
        color: red;
      }
      
      video /deep/ input[type="range"] { background-color:blue;}

<video controls></video>
    <car-list>
      <dealer-list></dealer-list>
    </car-list>
    
    <template id="car">
      <ul>
        <li>Ferrari Enzo</li>
        <li>Porsche 91l Turbo</li>
        <li>Dodge Caravan</li>
      </ul>
      <shadow></shadow>
    </template>
    
    <template id="dealer">
      <ul>
        <li>Beverly Hills Ferrari</li>
        <li>Beverly Hills Dodge</li>
      </ul>
    </template>

Answer 1

它在视频元素上显示为 /deep/ was deprecated was considered a bug 。但是，您可以使用 video::-webkit-media-controls-timeline 选择视频时间轴，并在其上设置 background-color。