Vaadin14中如何为shadow-root内vaadin-login-form按钮标签写CSS选择器

针对 <vaadin-login-form> shadow DOM 内部 vaadin-button-container 下按钮的样式选择，可按照以下两种方案实现：

方案1：直接通过公开part组合选择（推荐） #

vaadin-button-container 和 vaadin-login-submit 都是 <vaadin-login-form> 公开的part属性，可直接在你已绑定的 login.css 中使用层级选择器定位：

/* 选中vaadin-button-container容器内的提交按钮 */
[part="vaadin-button-container"] [part="vaadin-login-submit"] {
  /* 示例样式，可按需替换 */
  border-radius: 8px;
  margin-top: 16px;
  box-shadow: none;
}

如果需要修改按钮内部的文字、图标等元素，由于提交按钮本身是独立的 <vaadin-button> 组件，拥有单独的shadow DOM，需要额外绑定针对该组件的样式：

1. 新增样式文件 ./styles/login-button.css
2. 在LoginView类上追加@CssImport注解：

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

3. 在login-button.css中定义按钮内部样式，例如修改文字样式：

   [part="label"] {
     font-weight: 600;
     font-size: 15px;
     letter-spacing: 0.5px;
   }
   

方案2：添加自定义主题隔离样式 #

如果需要避免该样式影响项目内其他的 <vaadin-button> 组件，可通过自定义theme属性做隔离：

1. 在Java代码中为登录表单添加自定义theme标识：

   loginForm.getElement().setAttribute("theme", "custom-login-form");
   

2. 在login.css中添加属性筛选：

   :host([theme~="custom-login-form"]) [part="vaadin-button-container"] [part="vaadin-login-submit"] {
     background-color: #0061ff;
     border: none;
   }
   

注意：所有针对Vaadin组件的样式文件，必须保证@CssImport的themeFor属性和目标组件的标签名完全匹配，否则样式不会生效。

内容的提问来源于stack exchange，提问作者Sergiu