在HTML上使用inspect不会突出显示自定义组件 [英] Using inspect on the HTML doesn't highlight custom component

问题描述

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

I'm trying to inspect a simple custom component made in Ionic 3. When i inspect it, chrome doesn't highlight the area of the custom component. It only highlights the area if i select a element inside the custom component.

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

To help u understand it better i've put screenshots of the problem im facing.

图片显示了自定义元素星级评级中的div元素，该元素正在突出显示。这没关系。

The picture shows a div element inside the custom element star-rating, which is being highlighted. This is okay.

但现在何时我选择星级评级元素（这是自定义组件），它不会突出显示任何内容，如下图所示。

But now when i select star-rating element(which is the custom component) , it doesn't highlight anything as you can see in the image below.

[

这在我想要的时候会导致问题像这样在自定义组件上添加边框。

This is causing a problem when i want to add border to the custom component like this.

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

导致

我可以在div标签中添加边框，以解决此问题。但我不想那样做，因为我想使用这个选择器将css添加到星级的最后一个孩子。

I could add border in the div tag instead to solve this problem. But i don't want to do that because I want to use this selector for adding css to the last child of star-rating.

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

推荐答案

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

That's because custom-elements use display: inline by default. You can add the following styles to your component:

:host {
   display: block;
}

这篇关于在HTML上使用inspect不会突出显示自定义组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！