/深/ combinator視頻範圍藍色的CSS不能正常顯示

Question

我想使用/深/ 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>

Answer 1

看來/deep/was deprecated視頻元素，因爲它was considered a bug上。但是，您可以使用video::-webkit-media-controls-timeline來選擇視頻時間軸，並將其設置爲background-color。