[Webkit-unassigned] [Bug 62218] Some selectors with shadow pseudo ids can bleed into nested shadow DOM

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=62218





--- Comment #9 from Roland Steiner <rolandsteiner at chromium.org>  2012-03-15 22:28:45 PST ---
(In reply to comment #8)
> (In reply to comment #7)
> > Have you tried
> > 
> > video::-webkit-media-controls::-webkit-slider-container
> 
> This is what I tried first and it doesn't work.

Hm, I have a hunch why, but could you please post a minimal test case so that we can look at the issue in detail?

> Also, I cannot address individual sliders differently in this way. For example, I have a slider for the timeline and a slider for the volume. If I wanted to style them differently, it wouldn't be possible. (Thank god that's not currently required, but I can see it coming...)

Well, just use 3 levels of pseudo-elements: volume::-webkit-media-controls::-webkit-volume-control::-webkit-slider-container ... ;) (just kidding!)

The problem in any case is that all of this requires more or less knowledge of the <volume>'s internal structure. The way I think we really want to take this is to use CSS Variables. You'd write

video {
    data-webkit-volume-control-border-width: 1px;
    data-webkit-volume-control-border-color: rgb(130, 130, 130);
    data-webkit-volume-control-border-radius: 5px;
}

and inside the shadow DOM you'd use 

<style scoped>
    #volume::-webkit-slider-container {
        border: data(webkit-volume-control-border-width, 0px) solid data(webkit-volume-control-border-color, white);
        border-radius: data(webkit-volume-control-border-radius, 0px);
    }
</style>

or even do another stage of handing variables off:

<style scoped>
    #volume {
        data-webkit-slider-border-color: data(webkit-volume-control-border-color, white);
        data-webkit-slider-border-width: data(webkit-volume-control-border-width, 0px);
        data-webkit-slider-border-radius: data(webkit-volume-control-border-radius, 0px);
    }
</style>

where the shadow DOM within <input type="range"> uses the variables similarly to set the border color and radius. But unfortunately all of this isn't ready yet.

> I'm open for any suggestions. Other than hard coding media controls knowledge into the shadow dom of the input element, I couldn't see a solution. I don't think hard coding is the right approach.

Actually, what is the purpose? Is this to allow the user to style the <video> element, or is it for internal styling only? In the latter case a <style scoped> inside the <video> shadow DOM might work, at least for the time being (?).

-- 
Configure bugmail: https://bugs.webkit.org/userprefs.cgi?tab=email
------- You are receiving this mail because: -------
You are the assignee for the bug.