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

Question

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

为了帮助您更好地理解它，我提供了我面临的问题的屏幕截图。

图片显示自定义元素 star-rating 内的 div 元素，该元素被突出显示。这个还行。

但是现在当我 select star-rating 元素（这是自定义组件）时，它不会突出显示任何内容，如下图所示。

[

当我想像这样向自定义组件添加边框时，这会导致问题。

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

导致

我可以在 div 标签中添加边框来解决这个问题。但我不想这样做，因为我想使用这个 select 或将 css 添加到 star-rating 的最后一个 child。

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

Answer 1

那是因为 custom-elements 默认使用 display: inline。您可以将以下样式添加到组件中：

:host {
   display: block;
}