Angular渲染的DOM html自定义属性

Question

我是前端的新手，我开始使用Angular。

当我查看最终的DOM时，我看到这样的代码

<style>
.pane[_ngcontent-c0]~
....
}
</style>

<div _ngcontent-c0 class="pane" ...

这是使用CSS属性选择器，但我的问题与自定义属性“ _ngcontent-c0”有关，在html5中，有一个新功能，其名称为“以（data- *）名称为前缀的数据自定义属性。”自定义属性未使用数据语法，这不会使文档无效吗？是否可以在没有数据前缀的情况下定义自定义属性？

预先感谢问候

Answer 1

您是正确的，这不再是有效的HTML，因为在HTML规范中未指定_ngcontent-c0 。 但这仅意味着未定义属性。

您始终可以添加自定义属性，但是这些属性很可能不会起作用，因为浏览器只会忽略它们。 请注意，这将来可能会改变。

这些自定义属性的用途是CSS样式的封装。 在CSS中，您仍然可以将这些自定义属性用于样式定义，并且一个组件的样式不会渗入另一组件的样式。 这基本上是Shadow DOM的一种解决方法。 Angular会自动将这些自定义属性添加到组件的所有样式以封装其样式。

Answer 2

您在这里看到的是：

_ngcontent-c0是Angulars创建范围DOM的方法。 他们注入这些属性的原因是多种多样的，其中之一例如是针对组件范围的样式。

.pane[_ngcontent-c0] <-这是CSS选择器。 comonents样式表中的每个CSS规则都适用于它。 它发生在预处理中。

关于此的可读文档很少，这是我能找到的最好的文档：

您不应对此产生任何影响，但CLI也不应默默地削减任何内容。

相反，由于模板语法错误，CLI可能会停止编译。

通过创建组件，您可以创建自定义HTML标签（kinda）。 我的意思是<app-component>类的。 它们是DOM元素的组件作用域的根（再次，不是100％准确，这更加形象化）。

如果要创建自定义属性，可以采用以下几种方法：

这是在Angular中操作HTML属性的方式（不仅适用于自定义属性）

这会从元素中添加或删除属性

<input [attr.disabled]="!value ? null : '' "

将导致<input disabled=''>与<input disabled>相同。 如果我们有一个值存在，那就只是<input> 。

而当使用[attr. 在Angular允许的范围之外，我认为可以使用的名称没有任何限制。

制作data-attributes ：

<div [attr.data-attr-test]=" 'Foo' ">

并简单地使用组件中的值：

<img [src]="value">

还有一些指令，它们像属性一样放置，但用于操纵DOM并进行行为更改：

https://angular.io/guide/attribute-directives