Re: Need a better way to reach into the shadow DOM subtree

On Mon, Apr 11, 2011 at 2:00 PM, David Hyatt <hyatt@apple.com> wrote:
> On Apr 11, 2011, at 3:19 PM, Tab Atkins Jr. wrote:
>
>> (To answer Hyatt's comment directly - this wouldn't allow arbitrary
>> selection into a shadow.  The component author still has to explicitly
>> expose certain nodes as shadow nodes before the selector engine would
>> pick them up.)
>>
>> It's possible that the correct answer to this case is that Components
>> should have some way of flattening their tree of shadows, so you could
>> just select the thumb directly from the video, but that doesn't seem
>> like quite the right answer.  It means you can't distinguish thumbs
>> that are exposed by different shadow nodes, and also means that you
>> can't select a thumb based on the state of the timeline (like whether
>> it's :enabled or :disabled).
>
> Yeah, I am definitely sympathetic to the nesting problem.  With the scrollbar pseudo-elements, I opted for a flat set of objects rather than a hierarchy of objects, i.e., the thumb is not inside the track and the track is not inside the scrollbar.  Instead it's all flattened.  I mainly did this to avoid having to chain pseudo-elements, e.g., ::scrollbar::track::thumb, but it also makes the rules simpler.  The consequence of this is that they all had to respond to states like enabled/disabled together, etc., and they fully qualify themselves, e.g., ::scrollbar-thumb.  I definitely think it might be worth considering ways to do automatic flattening for easy styling.
>
> I guess a combinator selector of some kind for specifically targeting named pieces would be fine, although I think it might be interesting to think about pseudo-elements used in conjunction with a set of automatic flattening rules.

Making the % combinator (I don't like that glyph, but I'll continue
using it as a temporary name) be analogous to the descendant
combinator instead of the child combinator might help here.  That way
you could do both "div % scrollbar % track % thumb" and just "div %
thumb".

Alternately, expose two shadow combinators, one which targets only
exposed shadows in the immediate shadow tree, and one which targets
exposed shadows in nested trees.  This is directly analogous to the
two pairs of combinators we currently have, where '>' is the
restricted form of ' ' and '+' is the restricted form of '~'.

~TJ

Received on Monday, 11 April 2011 21:26:53 UTC