fix(compiler): Allow components to use any style of selector. Fixes #1602

modules/angular2/test/render/dom/compiler/compiler_common_tests.ts

@@ -89,6 +89,27 @@ export function runCompilerCommonTests() {
                });
          }));
 
+      it('should create element from component selector', inject([AsyncTestCompleter], (async) => {
+           var compiler = createCompiler((parent, current, control) => {
+             current.inheritedProtoView.bindVariable('b', 'a');
+           });
+
+           var dirMetadata = DirectiveMetadata.create({
+             id: 'id',
+             selector: 'marquee.jazzy[size=huge]',
+             type: DirectiveMetadata.COMPONENT_TYPE
+           });
+
+           compiler.compileHost(dirMetadata)
+               .then((protoView) => {
+                 let element = DOM.firstChild(DOM.content(templateRoot(protoView)));
+                 expect(DOM.tagName(element).toLowerCase()).toEqual('marquee');
+                 expect(DOM.hasClass(element, 'jazzy')).toBe(true);
+                 expect(DOM.getAttribute(element, 'size')).toEqual('huge');
+                 async.done();
+               });
+         }));
+
       it('should use the inline template and compile in sync',
          inject([AsyncTestCompleter], (async) => {
            var compiler = createCompiler(EMPTY_STEP);

modules/angular2/test/render/dom/compiler/directive_parser_spec.ts

@@ -174,12 +174,6 @@ export function main() {
         expect(results[0].componentId).toEqual('someComponent');
       });
 
-      it('should throw when the provided selector is not an element selector', () => {
-        expect(() => { createPipeline(null, [componentWithNonElementSelector]); })
-            .toThrowError(
-                `Component 'componentWithNonElementSelector' can only have an element selector, but had '[attr]'`);
-      });
-
       it('should not allow multiple component directives on the same element', () => {
         expect(() => {
           process(el('<some-comp></some-comp>'), null, [someComponent, someComponentDup]);

modules/angular2/test/render/dom/compiler/selector_spec.ts

@@ -335,4 +335,27 @@ export function main() {
       expect(cssSelectors[2].notSelectors[0].classNames).toEqual(['special']);
     });
   });
+
+  describe('CssSelector.getMatchingElementTemplate', () => {
+    it('should create an element with a tagName, classes, and attributes', () => {
+      let selector = CssSelector.parse('blink.neon.hotpink[sweet][dismissable=false]')[0];
+      let template = selector.getMatchingElementTemplate();
+
+      expect(template).toEqual('<blink class="neon hotpink" sweet dismissable="false"></blink>');
+    });
+
+    it('should create an element without a tag name', () => {
+      let selector = CssSelector.parse('[fancy]')[0];
+      let template = selector.getMatchingElementTemplate();
+
+      expect(template).toEqual('<div fancy></div>');
+    });
+
+    it('should ignore :not selectors', () => {
+      let selector = CssSelector.parse('grape:not(.red)')[0];
+      let template = selector.getMatchingElementTemplate();
+
+      expect(template).toEqual('<grape></grape>');
+    });
+  });
 }