用于阴影根目录的Vaadin14登录表单css选择器

Question

我有一个vaadin登录表单，它具有默认的css样式。DOM看起来像这样

​

我的问题是，我如何使用css选择器来样式标签部分的vaadin按钮-容器？我正在使用在我的LoginView上使用的css文件，如下所示：

@CssImport(value = "./styles/login.css", themeFor = "vaadin-login-form")

我能够为vaadin-login-submit部件设置样式

[part="vaadin-login-submit"] {
    background-color: #0061ff;
}

在我的css文件中，但是由于标签部分在阴影区域中，所以我不知道如何选择它来应用适当的css。

Answer 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>

​