Angular 6 / TSLint Component Selector for tr element

Question

In an earlier version I was able to specify a component selector as as an attribute.

@Component({
  selector: '[app-row]',
  ...
})
export class RowComponent implements OnInit {
  ngOnInit() {}
}

HTML:

<tr app-row></tr>

Now I get the lint error:

ERROR: /path/to/row.component.ts[8, 13]: The selector of the component "RowComponent" should be used as element (https://angular.io/styleguide#style-05-03)

I realize that I can nest a tr within the element, but I don't always have control over the styles and I personally don't appreciate unnecessary nesting and generally try to avoid it.

How do I specify a component as a "tr" element, if I'm supposed to always use an element selector. IE: <app-row></app-row>? What is the appropriate Angular 6 way to accomplish this?

Note: I've already looked at the link to the style guide and that section does not cover anything similar to my specific use case. I've also tried selecting by id, but get the same lint error.

Answer 1

I updated tslint.json to allow the component selector to be an attribute.

"component-selector": [
  true,
  ["element", "attribute"],
  "app",
  "kebab-case"
],