Vaadin 23中JS函数fadeOut未定义的导入问题求助

Vaadin 14基于ES模块机制，直接在模块内给window挂载函数容易因作用域或加载顺序问题导致全局不可用，给你两个可行方案：

方案1：规范暴露全局函数 #

修改js/script.js，明确将函数挂载到window对象，同时确保模块路径引用正确：

// js/script.js
window.fadeOut = function(elementId) {
  const target = document.getElementById(elementId);
  target.style.opacity = '0';
  setTimeout(() => {
    target.style.display = 'none';
  }, 500);
};

Java类中的@JsModule注解要对应资源路径，若JS文件放在src/main/resources/META-INF/resources/js/script.js，则注解应为：

@JsModule("./js/script.js")

方案2：用Vaadin原生方式绑定事件（更推荐） #

完全规避全局函数依赖，直接在Java代码中处理按钮点击逻辑，符合Vaadin组件开发规范：

// 在CookiesDiv构造方法中
Button gotItBtn = new Button("GOT IT");
gotItBtn.addClickListener(e -> {
  getElement().executeJs("""
    const el = this;
    el.style.opacity = '0';
    setTimeout(() => {
      el.style.display = 'none';
    }, 500);
  """);
});
add(gotItBtn);

Vaadin 14组件默认使用Shadow DOM，普通CSS无法穿透作用域，需按以下方式调整：

方案1：用@CssImport的themeFor属性（自定义组件专属） #

在CookiesDiv类上添加注解，指定样式作用的组件标签：

@CssImport(value = "./css/cookies-styles.css", themeFor = "cookies-div")

Vaadin会自动将类名转换为小写连字符形式的标签名（CookiesDiv对应cookies-div），若需自定义标签可加@Tag("custom-cookie-bar")注解。然后在CSS文件中直接用标签名作为选择器：

cookies-div {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #333;
  color: #fff;
  padding: 1.2rem;
  /* 其他样式属性 */
}

方案2：使用全局样式 #

若要让样式全局生效，将CSS文件放在src/main/resources/META-INF/resources/css/global-styles.css，然后在Java类中引入：

@CssImport("./css/global-styles.css")

方案3：用Shadow DOM的::part选择器 #

给组件内的元素设置part属性：

Div contentArea = new Div();
contentArea.getElement().setAttribute("part", "content");
add(contentArea);

然后在CSS中通过::part定位元素：

cookies-div::part(content) {
  margin: 0 1rem;
  font-size: 0.9rem;
}

确保静态资源路径符合Vaadin要求：

• JS文件：src/main/resources/META-INF/resources/js/script.js
• CSS文件：src/main/resources/META-INF/resources/css/cookies-styles.css

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