影子根的 Vaadin 14 登录表单 css 选择器

Posted 2023-02-21

【中文标题】影子根的 Vaadin 14 登录表单 css 选择器

【英文标题】：Vaadin14 login-form css selector for shadow-root

【发布时间】：2021-12-18 20:12:02

【问题描述】：

我有一个应用了默认 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。

【参考方案1】：

这不是您使用的正确 ::part 语法。

参见规范：https://drafts.csswg.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>

【讨论】：

::part(label) 确实有效，但它选择了所有具有名为 label 的部分的元素，而我的最终目标是仅选择嵌套在

然后让你的选择器更具体，或者将选择器不在全局 CSS 中而是在 shadowRoot 的更深处