如何修改Vaadin MessageInput的文本框占位符及按钮内容？

服务器端直接修改（推荐，适用于Vaadin 24+） #

Vaadin新版本已开放访问MessageInput内部组件的API，无需依赖CSS或JS即可直接完成修改：

1. 修改文本框占位符 #

通过getTextField()获取内部输入框，直接设置占位符内容：

MessageInput messageInput = new MessageInput();
messageInput.getTextField().setPlaceholder("Your query here");

2. 修改发送按钮文本 #

通过getSubmitButton()获取发送按钮，设置按钮显示文本：

messageInput.getSubmitButton().setText("Search");

客户端JS/CSS方式（适用于旧版本Vaadin） #

如果使用的是未开放内部组件API的旧版本，可通过客户端脚本操作DOM实现需求：

1. 注入JavaScript修改内容 #

在Java代码中执行客户端脚本，穿透组件的shadowRoot定位内部元素并修改：

UI.getCurrent().getPage().executeJs("""
    const messageInput = document.querySelector('vaadin-message-input');
    const textField = messageInput.shadowRoot.querySelector('vaadin-text-field');
    const submitButton = messageInput.shadowRoot.querySelector('vaadin-button');
    
    textField.placeholder = 'Your query here';
    submitButton.textContent = 'Search';
""");

2. CSS辅助调整（可选） #

若需要修改占位符的样式（如颜色、字体），可添加以下CSS规则：

vaadin-message-input::part(text-field) ::placeholder {
    color: #666;
    font-style: italic;
}

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