mhemesath/r2d3 — pull request #26 by mhemesath (2012-10-17 14:01:21+00:00)
Title: Add support for styling via CSS.

This branch adds support for styling via CSS cross browser. In implementing this feature I looked at two appraoches.

1. Looking up properties in a stylesheet - This approach would get a list of the stylesheets and manually look up properties based on a matching selector. Although this approach is straightforward for simple selectors based off tag name or a class, it is virtually impossible to use the cascade to look up properties. This approach is also unaware to dynamic changes in the parent structure. This means adding a class to a parent element will not dynamically update the child.

2. Create a shadow DOM to determine styles - This approach uses the HTML5 shiv approach to register SVG elements in IE. The paper then maintains a "shadow DOM" that is the SVG structural equivalent. When elements are added to the paper or have a class change, they reference the shadow DOM to determine what styles to apply from CSS. The advantages to this approach is that R2D3 can take full advantage of the cascade and modern selectors. The disadvantage is that we have to maintain a shadow DOM copy and that we are unaware of dynamic changes to the parents of the VML elements (e..g added classes, appending to different parents in the cascade).

I ended up going with the shadow DOM as taking full advantage of the cascade is must have in my opinion. I think the fact that the styles don't automatically update can be handled wtih the inclusion of a custom event to trigger style updates.

Please refer to examples/css.html for a working example.