Re: Better Variables through Custom Properties

On Mon, Oct 24, 2011 at 16:39, Tab Atkins Jr. <jackalmage@gmail.com> wrote:

> In this simple case, two custom properties are set on the root
> element.  They inherit down to the h1, where they are referenced with
> the data() function.  Here I'm assuming that properties prefixed with
> "data-" are "custom properties", which are valid but defined to be
> meaningless, similar to the data-* attributes in HTML.
>

Just for clarification: In my original proposal I assumed that data() (there
called apply()) can also reference any "normal" properties, which I believe
could be useful (e.g., swapping colors). Do you envision this for data() as
well, or do you see problems with this?

2. Scoping gives us a useful form of "namespacing" as well.  If you
> set a variable on the root of your component (Component Model or
> ad-hoc), your variable won't show up for elements outside of the
> component.  As well, if the same variable name was used outside your
> component, it won't affect *your* styles either.  (This isn't perfect,
> as "donut"-style components that contain arbitrary content will still
> see your component's value, and not the global value.)
>

This can be solved "manually": Suppose you use 2 "donut" components 'foo'
and 'bar' that both use the variable 'data-color'. You can resolve the
namespace clash e.g., by

:root {
  data-foo-color: red;
  data-bar-color: green;
}
.foo {
  data-color: data(data-foo-color);
}
.bar {
  data-color: data(data-bar-color);
}


- Roland