聚焦时自定义 <vaadin-button>

如何解决聚焦时自定义 <vaadin-button>

我想在 Vaadin 14.6 中创建自定义 Lumo 主题，其中按钮 (<vaadin-button>) 在聚焦时显示双边框 (css: Box-shadow: 0 0 0 1px #fff,0 0 0 3px var(--some-custom-background-color);)。 虽然其他 <vaadin-button> 伪选择器（例如 :hover、:active 等）的自定义样式效果很好，但我找不到自定义 :focus 外观的方法。

解决方法

焦点样式需要使用应用在宿主元素上的 focused 和 focus-ring 状态属性进行自定义。

应用了 focused 属性，按钮使用鼠标/指针或键盘聚焦，而 focus-ring 仅在使用键盘聚焦时应用（对应于原生 :focus-visible伪类）。

:host([focused]) {
  ...
}

:host([focus-ring]) {
  ...
}

,

我发现实际上是 Firefox 没有显示与 :focus 相关的 css。 Chrome 和 Safari 会根据需要显示样式。

为了完整起见，这是相关的 css，它位于应用程序“themes/components”文件夹中的“vaadin-button.css”：

:host([theme~="primary"]:focus) {
    height: calc(var(--my-button-size) - 6px);
    border-radius: 1px;
    background-color: var(--my-button-primary-background-color-focus);
    box-shadow: 0 0 0 1px #fff,0 0 0 3px var(--my-button-primary-background-color);
}