title: How to define an Angular 2 component or directive with multiple selectors
body: <p><strong>Goal:</strong></p>
  
  <p>Provide 'synonym' selectors for components and directives within my application.</p>
  
  <p><strong>Motivation:</strong></p>
  
  <p>There are times where a component or directive provides functionality that can be thought of in different ways whereas the name of the selector should meaningfully represent or simplify thinking about how the component or directive operates (the name being a mnemonic device).</p>
  
  <p><strong>Research:</strong></p>
  
  <h2>Directives</h2>
  
  <p>I had observed that Material 2 provides what seemed to be multiple selectors for its <code>MdList</code> and <code>MdListItem</code> directives:</p>
  
  <p><a href="https://github.com/angular/material2/blob/master/src/lib/list/list.ts">https://github.com/angular/material2/blob/master/src/lib/list/list.ts</a></p>
  
  <pre><code>@Component({
    moduleId: module.id,
    selector: 'md-list, md-nav-list',
    host: {'role': 'list'},
    template: '&lt;ng-content&gt;&lt;/ng-content&gt;',
    styleUrls: ['list.css'],
    encapsulation: ViewEncapsulation.None
  })
  export class MdList {}
  </code></pre>
  
  <p>...and...</p>
  
  <pre><code>@Component({
    moduleId: module.id,
    selector: 'md-list-item, a[md-list-item]',
    host: {
      'role': 'listitem',
      '(focus)': '_handleFocus()',
      '(blur)': '_handleBlur()',
    },
    templateUrl: 'list-item.html',
    encapsulation: ViewEncapsulation.None
  })
  export class MdListItem implements AfterContentInit {
      ...
  }
  </code></pre>
  
  <p>From the Angular 2 attribute directives page in the documentation:</p>
  
  <p><a href="https://angular.io/docs/ts/latest/guide/attribute-directives.html">https://angular.io/docs/ts/latest/guide/attribute-directives.html</a></p>
  
  <blockquote>
    <p><code>@Directive</code> requires a CSS selector to identify the HTML in the template that
        is associated with our directive. The CSS selector for an attribute is the
        attribute name in square brackets. Our directive's selector is <code>[myHighlight]</code>.
        Angular will locate all elements in the template that have an attribute named
        <code>myHighlight</code>.</p>
  </blockquote>
  
  <p>Which links to the following attribute selectors MDN page:</p>
  
  <p><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors">https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors</a></p>
  
  <p>From the Angular 2 Cheat Sheet page:</p>
  
  <p><a href="https://angular.io/docs/js/latest/guide/cheatsheet.html">https://angular.io/docs/js/latest/guide/cheatsheet.html</a></p>
  
  <p><a href="https://i.stack.imgur.com/2ADfa.png"><img src="https://i.stack.imgur.com/2ADfa.png" alt="enter image description here"></a></p>
  
  <hr>
  
  <p>The comma syntax of the Material 2 <code>list.ts</code> CSS selectors that I found, suggests that these apply to multiple situations - my evaluation of what these selectors are doing is:</p>
  
  <ol>
  <li><code>class MdList</code> applies to <code>md-list</code> and <code>md-nav-list</code> elements</li>
  <li><code>class MdListItem</code> applies to <code>md-list-item</code> and <code>a</code> elements that have a <code>md-list-item</code> attribute</li>
  </ol>
  
  <h2>Components</h2>
  
  <p>From the Angular 2 Architecture Overview page:</p>
  
  <p><a href="https://angular.io/docs/ts/latest/guide/architecture.html">https://angular.io/docs/ts/latest/guide/architecture.html</a></p>
  
  <blockquote>
    <p>selector: CSS selector that tells Angular to create and insert an instance
    of this component where it finds a <code>&lt;hero-list&gt;</code> tag in parent HTML. For 
    example, if an app's HTML contains <code>&lt;hero-list&gt;&lt;/hero-list&gt;</code>, then Angular 
    inserts an instance of the <code>HeroListComponent</code> view between those tags.`</p>
  </blockquote>
  
  <p>Interestingly, in the wild, I have not come across any example of a component that has multiple selectors.</p>
  
  <p><strong>Mental Model Misconceptions:</strong></p>
  
  <p>When I was introduced to Angular 2 I "lazily" interpreted <code>selectors</code> merely as the name of the component or directive as represented within the application <code>HTML</code>.</p>
  
  <p>In my (faulty) mental model component selectors where only a way of effectively defining an application specific <code>HTML</code> element.</p>
  
  <p>In my (faulty) mental model directive selectors where only a way to define an application specific <code>HTML</code> element attribute serving to modify the behavior of the element.</p>
  
  <p>Having done the research and having carefully studied (all of the words in) the documentation I have come to realize that there's something more powerful going on here...</p>
  
  <p><strong>General Questions:</strong></p>
  
  <ol>
  <li>Where have I got any of the above wrong?</li>
  <li>What other aspects of component and directive selectors am I missing? e.g. is there more power to be harnessed here?</li>
  </ol>
  
  <p><strong>Specific Questions:</strong></p>
  
  <ol>
  <li>Can a component have element attribute selector? and if so, what would the behavior/effect be?</li>
  <li>In which situations would you want a directive to have an element selector?</li>
  <li>What's the syntax to apply a directive to synonym CSS attributes? e.g. apply a directive to any of a group of CSS attribute selectors...</li>
  </ol>