Angular中HTML组件选择器的DOM行为探究

• 是否带有默认样式？
  Angular生成的自定义组件标签本身没有任何默认样式，浏览器会将其视为未知的行内元素处理，和<span>类似，但没有任何预设的margin、padding、字体等样式，所有样式都需要你主动在组件的styles/styleUrls或者全局样式中定义。

• 是否表现类似某些已知HTML元素？
  默认状态下，自定义组件标签的渲染行为和**行内元素（inline）**一致：不会自动换行，宽度由内部内容决定，不能直接设置宽高。如果需要改变它的显示特性，可以在组件样式里设置display属性，比如display: block就会像<div>一样成为块级元素，display: inline-block则兼具行内和块级的特性。

• 能否为该标签添加类、样式或其他属性？
  完全支持：

• 添加类：直接在组件标签上写class="custom-class"，可以在全局样式中定义该类的样式，或者在组件样式里通过:host(.custom-class)来针对带这个类的组件宿主元素设置样式。

• 内联样式：使用style="color: #333; padding: 8px"直接设置行内样式。

• 自定义属性/输入属性：可以添加任意HTML属性（比如data-item-id="456"），也可以通过Angular的@Input()装饰器定义组件的输入属性，比如<app-profile [userInfo]="currentUser"></app-profile>来传递数据。

内容的提问来源于stack exchange，提问作者Matheus Alencar