聚焦时自定义 <vaadin-button>答案

【问题标题】：Customizing <vaadin-button> when in focus聚焦时自定义 <vaadin-button>
【发布时间】：2021-06-02 22:15:40
【问题描述】：

我想在 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 外观的方法。

【问题讨论】：

展示你的努力，让我们实现你的产出。

标签： css vaadin customization vaadin-flow theming

【解决方案1】：

需要使用focused 和focus-ring 状态属性自定义焦点样式，这些属性应用于宿主元素。

focused 属性应用于按钮通过鼠标/指针或键盘获得焦点，而focus-ring 仅在使用键盘获得焦点时应用（对应于本机 :focus-visible 伪类）。

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

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

【讨论】：

【解决方案2】：

我发现实际上是 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);
}

【讨论】：