title: Duplicate "id" attribute in Angular 2 component
body: <p><strong>Context</strong></p>
  
  <p>I'm writing a custom Angular component for a checkbox. The component renders a checkbox tag along with a label tag. The "id" attribute of the checkbox and the "for" attribute of the label are both set to the component's <code>id</code> property (an <code>@Input</code> to the component) to ensure that clicking the label will toggle the checkbox. A simplified version of the template looks like:</p>
  
  <pre><code>&lt;div class="checkbox"&gt;
      &lt;input type="checkbox" [id]="id" /&gt;
      &lt;label [for]="id"&gt;&lt;ng-content&gt;&lt;/ng-content&gt;&lt;/label&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Problem</strong></p>
  
  <p>When I set an "id" prop on my component (e.g. <code>&lt;my-checkbox id="hello"&gt;Check me&lt;/my-checkbox&gt;</code>), an "id" attribute is automatically set on the component wrapper tag in the DOM. This results in duplicate ids in the DOM because I'm already setting an "id" attribute on the checkbox inside the component. This is invalid and breaks the browser's default toggle-by-clicking-the-label behavior. The DOM output is:</p>
  
  <pre><code>&lt;my-checkbox id=“my-checkbox” ng-reflect-id=“my-checkbox” ng-reflect-checked="true"&gt;
      &lt;div ng-reflect-ng-class="[object Object]" class="checkbox"&gt;
          &lt;input class="checkbox__element" type="checkbox" name="fire_missiles" ng-reflect-id=“my-checkbox” id=“my-checkbox” value=“fire_missiles” ng-reflect-checked="true"&gt;
          &lt;label class="checkbox__label" ng-reflect-html-for=“my-checkbox” for=“my-checkbox”&gt;
              Fire missiles?
          &lt;/label&gt;
      &lt;/div&gt;
  &lt;/my-checkbox&gt;
  </code></pre>
  
  <p>Is there a way to either a) get rid of the garbage container tag or b) stop the automatic reflection of the "id" prop onto the container as an attribute?</p>
  
  <p>NOTE: Using an attribute selector applied to something like a div doesn't help, it just moves the extra "id" from <code>&lt;my-checkbox /&gt;</code> to the div.</p>