Vaadin Flow：如何修改密码显示按钮的Aria标签属性

一、改进你的JavaScript方案 #

你的原代码存在语法错误、无法访问Shadow DOM内元素的问题，改进后的代码如下：

txtPassword.getElement().executeJs("""
    const toggleBtn = this.shadowRoot.querySelector('vaadin-password-field-toggle-button');
    if (toggleBtn) {
        toggleBtn.setAttribute('aria-label', '你的自定义提示文本');
    }
""");

注意点：

• Vaadin组件的内部元素在Shadow DOM中，必须通过this.shadowRoot访问（this指代当前密码字段的DOM元素）
• 用querySelector精准获取单个按钮，避免处理元素集合的麻烦
• 添加判断避免找不到按钮时抛出错误

二、更推荐的Vaadin原生API方案 #

没必要手写JS，Vaadin Flow的PasswordField组件本身就提供了设置切换按钮Aria Label的方式：

• Vaadin 23+版本直接调用API：

txtPassword.setToggleButtonAriaLabel("你的自定义提示文本");

• Vaadin 14-22版本通过属性设置：

txtPassword.getElement().setAttribute("toggle-button-aria-label", "你的自定义提示文本");

这种方式由组件内部处理属性映射，不用操作Shadow DOM，代码更简洁，也不会因为组件版本更新导致DOM结构变化而失效。

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