[英]Custom Elements are not getting marked when hovering over them with Chrome DevTools
我在其中嵌入了Web組件的主要html文件。 調試時，我注意到，將鼠標懸停在“自定義元素”上時未對其進行標記。
我還不能從一個過時的CSS設置自定義html元素的大小。
這是我的代碼：
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>
窗口小部件，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;
}
窗口小部件，uhr.css
body{
color:green;
background-color: gray;
}
div{
color:blue;
background-color: gray;
}
button{
background-color: red;
}
窗口小部件，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
}
} )
)
原因可能是因為我通過提取從小部件中注入了html嗎？
默認情況下，自定義元素是inline ，因此不會在開發工具中標記。
要對其進行標記，應將其CSS display屬性定義為block或inline-block 。
在其Shadow DOM內部，使用:host CSS偽類。
在widget-uhr.css中 ：
:host { display: block }
或者，在主文檔中，使用自定義元素名稱。
在view.css中 ：
widget-uhr { display: block }
我還不能從一個過時的CSS設置自定義html元素的大小。
使用Shadow DOM，CSS選擇器不會越過陰影邊界。 我們擁有來自外部世界的樣式封裝。
您可以將規則包括在陰影樹的style元素內。
<style>
@import url( 'view.css' )
</style>
調試時，我注意到，將鼠標懸停在“自定義元素”上時未對其進行標記。 您必須先啟用Shadow DOM檢查器。
跨度懸停在元素上時，span元素上的事件偵聽器被卡住並且不重置div
[英]Event Listener on span elements getting stuck and not resetting div when hovering over elements in quick succession
動畫 svg 的圓圈和將鼠標懸停在圓圈上時連接它們的線
[英]Animating an svg of circles and lines connecting them when hovering over a circle
將鼠標懸停在按鈕上時如何影響不同的類或HTML元素？
[英]How to impact different class or HTML elements when hovering over a button?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.