在HTML上使用檢查不會突出顯示自定義組件

Question

我正在嘗試檢查在Ionic 3中製作的簡單自定義組件。當我檢查它時，Chrome不會突出顯示自定義組件的區域。它只會突出顯示區域，如果我選擇自定義組件內的元素。

爲了幫助你更好地理解它，我已經把我面臨的問題的截圖。

圖片顯示了正在突出顯示的自定義元素star-rating內的div元素。這沒關係。

但是現在，當我選擇星級評級要素（這是自定義組件），它沒有指明有任何你可以在下面的圖片中看到。

[

當我要邊框添加到像這樣的自定義組件這是造成問題。

star-rating{ 
    border:1px solid #000; 
    border-bottom:0px; 
} 

導致

我可以在div標籤中添加邊框，而不是來解決這個問題。但我不想這樣做，因爲我想用這個選擇器來將CSS添加到星級的最後一個孩子。

star-rating:last-child{ 
    border-bottom:1px solid #000; 
} 

Answer 1

這是因爲custom-elements使用display: inline默認。您可以將以下樣式添加到您的組件中：

:host { 
    display: block; 
}