在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; 
}