Re: [css-variables] Non-inherited custom properties (Issue 5)

On Thu, Sep 6, 2012 at 7:59 PM, Roland Steiner <rolandsteiner@google.com> wrote:
> One case could be if you would like to flag an element, but not have the
> same applied to nested elements. For example, highlighting a moderator in a
> nested list of messages:
>
> <div class="message">
>     <div class="moderator message">
>         <div class="message >
>
> .moderator {
>     var-highlight-color: #fe6;
> }
>
> .message {
>     background-color: var(highlight-color, #eee);
> }
>
> This would also apply the highlight to the nested message, which is not
> intended. With components, this becomes even more interesting, as you would
> want to inherit across the shadow boundary, but not within the main DOM
> (e.g., just replace <div> with <x-message> above).
>
> That said, there should be a workaround in that one can just reset the
> variable at every applicable element and have that overridden by more
> specific rules:
>
> .message {
>     var-highlight-color: initial;
>     background-color: var(highlight-color, #eee);
>     // using a fallback in case more specific rule may reset to 'initial' as
> well
> }
>
> .message.moderator {
>     var-highlight-color: #fe6;
> }

Good example.  This rules out using something at the point of
reference - for that to work, you'd have to code extremely
defensively.  Instead, we'll need to address it at the point of
definition.

If we try to address this use-case with some form of local variables,
this case's mechanics imply that a local variable should shadow, but
not override, an inheriting variable, so that children receive the
value of the inheriting variable as normal.

This sounds like something that we can do in level 2, though.

~TJ

Received on Friday, 7 September 2012 06:21:13 UTC