[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 #10 from Silvia Pfeiffer <silviapf at chromium.org>  2012-03-16 00:05:29 PST ---
(In reply to comment #9)
> > > 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?


The patch for Chrome that I'm working on is not landed yet, so it's kinda difficult. I'll post a link to it when I'm uploading it to the chrome bug tracker.


> 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;
> }

> 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.


Hmm, these are very long variable names. Also, it's not actually the control's border that I'm setting, but the first shadow child (the container) in the input control.

I thought the shadowPseudoIds were a clever way of addressing the correct shadow element from CSS, but it's just unfortunate that there is only one level of hierarchical depth that we're allowed to use.


> > 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?


It's for internal styling only right now. User styling is a bonus, but not strictly necessary for my Chrome video controls styling update.

> In the latter case a <style scoped> inside the <video> shadow DOM might work, at least for the time being (?).

The shadow dom is coded in C++. I have an external stylesheet that is applied to the shadow dom, so scoping is out of the question IIUC.

If everything else fails, I think I will be able to grab the graphics context and set the CSS properties by hand. It's just that CSS is so much nicer to write than coding CSS rules in C++!

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