Angular渲染的DOM html自定义属性 [英] Angular rendered DOM html custom attributes

问题描述

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

I am new to frontend and i began using Angular.

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

When I look to the final DOM i see code like this

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

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

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

This is using CSS attribute selectors but my question is related with the custom attribute "_ngcontent-c0", in html5 there is a new feature with the name of "data custom attributes that are prefixed with (data-*) name. In this case the custom attribute is not using the data- syntax , this does not make the document invalid ?Is it possible to define custom attributes without the data- prefix ?

先谢谢了最好的问候

推荐答案

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

You are correct that this is not valid HTML anymore because _ngcontent-c0 is not specified in the HTML spec. But this just means that the attribute is not defined.

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

You can always add custom attributes but these will most likely not have effects because the browser just ignores them. Be aware that this might change in the future.

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

What these custom attributes are used for is the encapsulation of CSS styles. In CSS you can still use these custom attributes for style definitions and the styles of one component will not bleed into the styles of another component. This is basically a workaround for the Shadow DOM. Angular automatically adds these custom attributes to all styles of a component to encapsulate its styles.

这篇关于Angular渲染的DOM html自定义属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！