Search code examples
javascripthtmlgoogle-chrome-devtoolsweb-componentshadow-dom

Custom Elements are not getting marked when hovering over them with Chrome DevTools

I have a main html file where i embedd Web Components. When debugging I noticed, that my Custom Elements are not marked, when I hover over them. enter image description here

Im also not able to set the size of the custom html element from an outisde css.

Here is my code:

view.html

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <link href="view.css" rel="stylesheet" />
    <script defer src="widget-uhr.js"></script>
</head>

<body>
    <widget-uhr></widget-uhr>
    <widget-uhr></widget-uhr>
    <widget-uhr></widget-uhr>
    <button>View Button</button>
</body>
</html>

widget-uhr.html

   <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <link href="widget-uhr.css" rel="stylesheet" />
</head>

<body>
    <div id="time"></div>
    <button>Widget Button1</button>
    <button>Widget Button2</button>
    <button>Widget Button3</button>
</body>
</html>

view.css

body{
    display:block;
}
button{
    min-width: 250px;
    min-height: 100px;
    background-color: aqua;
    font-size: 32px;
}

widget-uhr.css

body{
color:green;
background-color: gray;
}

div{
    color:blue;
    background-color: gray;
}

button{
    background-color: red;
}

widget-uhr.js

fetch( "widget-uhr.html" )
    .then( stream => stream.text() )
    .then( text => 
        customElements.define( "widget-uhr", class extends HTMLElement {
            constructor() {
                super()
                this.attachShadow( { mode: 'open'} )
                    .innerHTML = text


            }
        } )
    )

Is the reason maybe because I inject my html from the widget via fetch?

Solution

  • By default a Custom Element is inline, so it won't be marked in Dev Tools.

    To get it marked, you should define its CSS display propery to block or inline-block.

    From inside its Shadow DOM, use the :host CSS pseudo-class.

    In widget-uhr.css:

    :host { display: block }

    Or, from the main document, use the custom element name.

    In view.css:

    widget-uhr { display: block }