Using inspect on the HTML doesn't highlight custom component

问题

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.

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

resulting in

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

回答1:

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

:host {
   display: block;
}

来源：https://stackoverflow.com/questions/45693973/using-inspect-on-the-html-doesnt-highlight-custom-component