h1. Declarative Component Mapping Syntax Options

|_.Language / Prior Art      |_._'Valid'_ HTML |_. HTML Mapping                       |_. Example                               |_. Example with Args                                                                         |
|_._'Valid'_                 |_.CSS Selectable |_. CSS Mapping                        |_. CSS Select                            |_. CSS Selector w Args                                                                       |
| JavaScript *MooTools*      |                 | *Multiple* instance *Separate* Args  | @new Foo(element); new Bar(element)@    | @new Foo(element, {a:"a", bB:"b B", c:{c:1}}); new Bar(element, {d:"d"})@                   |
|--                          |--               | --                                    | --                                      | --                                                                                          |
| HTML attr      *Dojo <1.6* |NO               | 1 Element per instance               | @<div nsType=foo>@                      | @<div nsType=foo a=a bB="b B" c.c=1>@                                                       |
|                            |*CSS: A*         | Single + Args                        | @[nsType]@                              | @[nsType=Foo][a=a][bB~=b][bB~=B][c.c=1]@                                                    |
| @data-*@ *Dojo 1.6+*       |YES              | 1 Element per instance               | @<div data-ns="Foo">@                   | @<div data-ns="Foo" data-ns-a="a" data-ns-b-b="b B" data-ns-c.c="1">@                       |
|                            |*CSS: A*         | Single + Args                        | @[data-ns-type]@                        | @[data-ns-type=Foo][data-ns-a=a][data-ns-bB~=b][data-ns-bB~=B][data-ns-c.c=1]@              |
| @class@ & attr *Apple iAd* |NO               | *Multiple* instances Combined Args   | @<div class="ad-foo ad-bar"></div>@     | @<div class="ad-foo ad-bar" ad-title="MyBarButton"></div>@                                  |
|                            |*CSS: A+*        | Multi + Args                         | @.ad-foo, .ad-bar@                      | @.ad-foo[ad-title], .ad-bar[ad-title]@                                                      |
| @data-*@ *Hue Behavior*    |YES              | *Multiple* instances Combined Args   | @<div data-filters="ns.foo, ns.bar">@   | @<div data-filters="ns.foo, ns.bar" data-a="a" data-b-b="b B" data-c='{"c":1}' data-d="d">@ |
|                            |*CSS: D*         | All + Args                           | @[data-filters]@                        | @[data-filters][data-a=a][data-bB~=b][data-bB~=B]@                                          |
| @data-*@ & CSS             |YES              | *Multiple* instances *Separate* Args | @<div data-ns data-ns.foo data-ns.bar>@ | @<div data-ns data-ns.foo="a:a; b-b:b B; c{c:1}" data-ns.bar="d:d">@                        |
|                            |*CSS: B*         | Multi                                | @[data-ns]@                             | @[data-ns.foo], [data-ns.bar]@                                                              |
| attr & CSS                 |NO               | *Multiple* instances *Separate* Args | @<div ns foo bar>@                      | @<div ns foo="a:a; b-b:b B; c{c:1}" bar="d:d">@                                             |
|                            |*CSS: B*         | Multi                                | @[ns]@                                  | @[ns][foo], [ns][bar]@                                                                      |
| @data-*@                   |YES              | *Multiple* instances *Separate* Args | @<div data-ns="Foo Bar Baz">@           | @<div data-ns="Foo Bar Baz" value=HTML data-foo.value=FOO data-bar.value=BAR>@              |
|                            |*CSS: A++*       | Multi + Multi Args                   | @[data-ns]@                             | @[data-ns~=Foo][value=Frog]:not([data-foo.value]), [data-ns~=Foo][data-foo.value=Frog]@     |
| HTML attr                  |NO               | *Multiple* instances *Separate* Args | @<div ns="Foo Bar Baz">@                | @<div ns="Foo Bar Baz" value=HTML foo.value=FOO bar.value=BAR>@                             |
|                            |*CSS: A++*       | Multi + Multi Args                   | @[ns]@                                  | @[ns~=Foo][value=Frog]:not([foo.value]), [ns~=Foo][foo.value=Frog]@                         |
| @data-*@                   |YES              | *Multiple* instances *Separate* Args | @<div data-ns="Foo, Bar, Baz">@         | @<div data-ns="Foo:value(FOO), Bar:value(BAR), Baz:value(HTML)" value=HTML>@                |
|                            |*CSS: D-*        | All                                  | @[data-ns]@                             | --                                                                                          |
| @data-*@                   |YES              | *Multiple* instances *Separate* Args | @<div data-ns="Foo, Bar, Baz">@         | @<div data-ns="Foo[value=FOO], Bar[value=BAR], Baz[value=HTML]" value=HTML>@                |
|                            |*CSS: D-*        | All                                  | @[data-ns]@                             | --                                                                                          |