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