在HTML上使用inspect不会突出显示自定义组件

Question

我正在尝试检查在Ionic 3中制作的简单自定义组件。当我检查它时，chrome不会突出显示自定义组件的区域。如果我在自定义组件中选择一个元素，它只会突出显示该区域。

为了帮助你更好地理解它我已经把问题的截图放在了我的面前。

图片显示了自定义元素星级评级中的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;
}