Question

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

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

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

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

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

预先感谢最好的问候

Answer 1

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

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

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

Answer 2

在那看到的东西

_ngcontent-c0 是创建范围DOM的Angulars方法。他们出于各种原因注入这些属性，其中之一是用于组件范围的样式。

.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并进行行为更改：