Cascading Properties
Define virtual properties for HTML elements using CSS selectors.
Why?
We needed a way to attach properties to HTML elements in arbitrary documents, without altering the original markup and polluting it with data-*
attributes. CSS selectors emerged as a natural fit for this.
However, CSS Variables aren’t available in all browsers yet, and proposals like Cascading Attribute Sheets and its implementations are primarily intended for HTML attributes and therefore mutate the DOM. So we had to come up with our own solution.
How?
The CascadingPropertySet
instance simply expects some property definitions along with a set of rules:
var properties = ; // Define the properties with default values or those which are inherited// (any properties with no default value or inheritance do not need to be explicitly defined)properties; // Define the rules using a SASS-like syntax:properties;
We can then retrieve the values by passing the reference to the element and the name of the property
to the getValue
method. The property value with the highest selector specificity will be returned:
// Turn a test HTML string into DOM elements using https://github.com/component/domifyvar ul = ; properties // => 0properties // => 1properties // => 2properties // => 3properties // => trueproperties // => null