What is the valid selector type for `selector` property in angular2 component

Question

I'm reading in a book about selector property of a component that:

With the selector key, you indicate how your component will be recognized when rendering HTML templates. The idea is similar to CSS or XPath selectors. The selector is a way to define what elements in the HTML will match this component. In this case, by saying selector: 'inventoryapp', we're saying that in our HTML we want to match the inventory-app tag, that is, we're defining a new tag that has new functionality whenever we use it.

So I put in CSS selector

@Component({
  selector: 'span[my-app].z',
  template: `<h1>Hello {{name}}</h1>`,
})

and it worked.

So I'm interested to know if the full CSS selectors syntax is supported.

Answer 1

Short answer: Yes.

According to angular2 docs: https://angular.io/docs/ts/latest/guide/cheatsheet.html

Directive configuration :

selector: '.cool-button:not(a)'

Specifies a CSS selector that identifies this directive within a template. Supported selectors include element, [attribute], .class, and :not(). Does not support parent-child relationship selectors.

Note: The usual way to define a component selector is just by giving it a tag as you know. Like: selector: "my-component" and use it as <my-component> inside the html.