我有一個應用了默認 css 樣式的 vaadin-login-form。DOM 看起來像這樣
我的問題是如何使用 css 選擇器來設定 vaadin-button-container 的標簽部分的樣式？我正在使用我的 LoginView 上使用的 css 檔案，如下所示：
@CssImport(value = "./styles/login.css", themeFor = "vaadin-login-form")
我能夠用它來設計這個vaadin-login-submit部分
[part="vaadin-login-submit"] {
background-color: #0061ff;
}
在我的 css 檔案中，但由于標簽部分在 shadow dom 內，我不知道如何選擇它來應用正確的 css。
uj5u.com熱心網友回復：
這不是::part您使用的正確語法。
請參閱規范：https : //drafts.c??sswg.org/css-shadow-parts/#part
和https://meowni.ca/posts/part-theme-explainer/
[part=...] 只是一個普通的 CSS 屬性選擇器，它確實不能穿透 shadowDOM
::part(label) 應該做這份作業
證明嵌套 shadowRoots 可以使用 ::part 設定樣式：
<style>
::part(shadowdiv) {
color: red;
font-weight: bold;
}
</style>
<custom-element></custom-element>
<script>
window.CEdepth = 0;
customElements.define("custom-element", class extends HTMLElement {
constructor() {
super().attachShadow({mode: 'open'})
if (window.CEdepth < 5) {
this.shadowRoot.innerHTML = `
<div part='shadowdiv'>Hello Web Component #${window.CEdepth}
<custom-element></custom-element><div/>`;
}
}
})
</script>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/348958.html
上一篇：子div增長到父div的全寬
下一篇：在按鈕之間添加一條垂直線