用于影子根的Vaadin14登录表单CSS选择器 [英] Vaadin14 login-form css selector for shadow-root

问题描述

我有一个应用了默认CSS样式的vaadin-login-form。DOM如下所示

我的问题是如何使用CSS选择器来设置vaadin-Button-容器的标签部分的样式？ 我使用的是在我的LoginView上使用的一个CSS文件，如下所示：

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

我能够用

设置vaadin-login-submit部分的样式

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

在我的css文件中，但由于标签部分在卷影DOM中，我不知道如何选择它以应用正确的css。

推荐答案

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

• 参见规范：https://drafts.csswg.org/css-shadow-parts/#part

• 和https://meowni.ca/posts/part-theme-explainer/

[part=...]只是一个常规的css属性选择器，它确实不能穿透shadowDOM

::part(label)应该做好这项工作

验证嵌套阴影根可以使用：：Part：

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

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

这篇关于用于影子根的Vaadin14登录表单CSS选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！