Html 指令和元素名称之间的区别

我在使用Angular/Material时首先遇到了这个问题，但我认为这是一个一般的HTML问题。我还没找到能解释这一点的参考资料

两者之间潜在的功能差异是什么

    <mat-table [dataSource]="data">
    ...
    </mat-table>

...

相对于

    <table mat-table [dataSource]="data">
    ...
    </table>

...

他们两个似乎工作相同。至少除了CSS元素引用的编码方式之外，我没有发现任何区别。但是为什么这些交替编码首先存在的背景是什么呢？

请参阅源代码：

在

MatTable

装饰器中有：

selector:'mat table，table[mat table]'

Angular指令支持多个选择器。根据，选择器可以声明为以下内容之一：

• 元素名称

  ：按元素名称选择

• .class

  ：按类名选择

• selector1、selector2

  ：选择selector1或selector2是否匹配

所以在功能上没有区别，因为MatTable组件只有两个不同的选择器