Re: Overloading pseudo-elements seems bad, was: Need a better way to reach into the shadow DOM subtree

[ -my google address ]

On Fri, Aug 12, 2011 at 6:06 AM, Roland Steiner
<rolandsteiner@google.com> wrote:
> I feel that pseudo-elements for components are a bad idea anyway. They will
> tempt authors to use, e.g.
>     x-video::timeline > div { /* ... */ }

This probably shouldn't be allowed, even when we allow chained pseudoelements.


> Such tricks, discovered by trial and error or by reading the component
> source, will seem to authors to allow a more fine-grained control over
> styling. Later, when the component is updated, sites break. IOW, if we allow
> this, component authors will know the fear of breaking the web.
> Chaining pseudo-elements can also lead to
>     x-video::timeline::before { /* inject content here */ }
> which may break the component horribly.

Yes, it may.  That's not our fault; you can mess up any layout if you
try hard enough.


> Fixing all that is by no means easy, and I'm not sure I have a good
> solution. Therefore please consider the following brainstorming rather than
> a well-thought-out proposal:
> It seems to me that pseudo-elements for components only use a very limited
> subset of what makes CSS anyway - little or no inheritance, and only very
> few attributes. So how about using "pseudo-CSS-attributes" instead? E.g.:
>     video {
>         ::timeline-color: blue;
>         ::timeline-thumb-color: blue;
>     }
> and within the component:
>     x-timeline { apply: timeline-color background-color,
> timeline-thumb-color ::thumb-color }
> This applies the value set to ::timeline-color to the background-color
> attribute, and forwards the value set for the ::timeline-thumb-color
> attribute to the pseudo-CSS-attribute ::thumb color, to be udsed by a nested
> component.

Ooh, piping in component-local vars.  That's pretty interesting.

~TJ

Received on Friday, 12 August 2011 16:31:11 UTC