Vaadin 24 Details组件文本点击无响应，能否恢复Vaadin 23交互方式？

Vaadin 24 对 Details 组件的交互范围做了调整，默认仅允许通过切换按钮触发展开/折叠。要恢复 Vaadin 23 中点击标题文本区域即可触发的逻辑，可通过以下两种方式实现：

方法一：CSS 扩展点击触发区域 #

通过自定义 CSS 让整个标题区域（包括文本部分）恢复可点击状态：

vaadin-details::part(summary) {
  cursor: pointer;
}
vaadin-details::part(summary-content) {
  pointer-events: auto;
}

将这段样式添加到项目的全局样式文件（如 styles.css）或组件专属样式中即可生效。

方法二：Java 代码绑定点击事件 #

手动给标题文本区域添加点击监听，控制组件的展开状态：

// 示例代码
Details details = new Details("示例标题", new Div("详情内容"));
// 定位到标题内容元素
Element summaryContent = details.getElement().querySelector("[part='summary-content']");
// 绑定点击事件切换展开状态
summaryContent.addEventListener("click", event -> {
    details.setOpened(!details.isOpened());
});

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