/ deep / combinator视频范围蓝色css无法正常显示

时间:2015-11-25 14:54:34

标签: javascript css

我正在尝试使用/ deep / combinator让我的视频控件上的范围显示为蓝色。目前没有任何变化。我有没有发现任何人注意到的语法错误?我正在使用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>

1 个答案:

答案 0 :(得分:1)

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