CODEWITHSUNDEEP
javascripthtmlgoogle-chrome-devtoolsweb-componentshadow-dom
J. Doe
J. Doe

Reputation: 333

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?

Upvotes: 1

Views: 631

Answers (2)

Supersharp
Supersharp

Reputation: 31219

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 }

Upvotes: 2

Tom Marienfeld
Tom Marienfeld

Reputation: 716

Style from outside

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

With Shadow DOM CSS selectors don't cross the shadow boundary. We have style encapsulation from the outside world.

You could include the rule inside the style element in the shadow tree.

 <style>
   @import url( 'view.css' )
 </style>

More information here

Chrome Inspector

When debugging I noticed, that my Custom Elements are not marked, when I hover over them. You have to enable Shadow DOM inspector first.

  1. Open your dev tools with F12
  2. Click on the three dots on the top right
  3. Click on Settings
  4. Enable option "Show user agents Shadow DOM" under Elements category

Upvotes: 0

Related Questions