我正在尝试使用/ 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>
答案 0 :(得分:1)
视频元素上显示/deep/
was deprecated was considered a bug。不过,您可以使用video::-webkit-media-controls-timeline
选择视频时间轴,并在其上设置background-color
。