为什么我自己的主题不适用于 vaadin 14

如何解决为什么我自己的主题不适用于 vaadin 14

我在我的项目中使用我自己的主题。如果我下载一个新项目，并在“前端”目录中创建我自己的主题，它就完美无缺。

当我切换到我的应用程序时，每次打开它都会显示...

类型错误：无法访问属性“appendChild”，n.shadowRoot 为空

在我所在的班级@Theme(Lumo.class)我把它改成了我自己的主题@Theme(themeFolder = "eo-vaadin-orange").

我在 package.json 中添加了 lumo-css-framework...

我在前端目录中创建了主题...

并创建我自己的styles.css...

我跑了，但每次我得到这个 ¿javascript？错误。

有什么想法吗？

谢谢

==== 更新 ======

我只在 webpack 捆绑主题中的所有 javascript 类之后使用 shadowRoot...

这是我的 package.json 文件...

{
  "name": "no-name","license": "UNLICENSED","vaadin": {
    "dependencies": {
      "lit-element": "2.5.1","@polymer/polymer": "3.2.0","@webcomponents/webcomponentsjs": "^2.2.10","@vaadin/vaadin-grid": "5.7.13","@vaadin/vaadin-icons": "4.3.2","@vaadin/vaadin-split-layout": "4.3.0","@vaadin/vaadin-combo-Box": "5.4.7","@polymer/paper-behaviors": "^3.0.0-pre.27","@vaadin/vaadin-core-shrinkwrap": "14.6.1","@vaadin/vaadin-upload": "4.4.1","@polymer/iron-behaviors": "^3.0.0-pre.26","@vaadin/vaadin-dialog": "2.5.2","@vaadin/vaadin-select": "2.4.0","@polymer/iron-a11y-keys-behavior": "^3.0.0-pre.26","@vaadin/vaadin-app-layout": "2.2.0","@vaadin/vaadin-item": "2.3.0","@vaadin/vaadin-notification": "1.6.1","@vaadin/vaadin-progress-bar": "1.3.0","@vaadin/vaadin-date-time-picker": "1.4.0","@vaadin/vaadin-ordered-layout": "1.4.0","@vaadin/vaadin-login": "1.2.0","@vaadin/vaadin-button": "2.4.0","@vaadin/vaadin-date-picker": "4.4.1","@vaadin/vaadin-text-field": "2.8.4","@vaadin/vaadin-menu-bar": "1.2.2","@vaadin/vaadin-custom-field": "1.3.0","@vaadin/vaadin-form-layout": "2.3.0","@polymer/iron-list": "3.1.0","@vaadin/vaadin-accordion": "1.2.0","@vaadin/vaadin-list-Box": "1.4.0","@polymer/iron-flex-layout": "^3.0.0-pre.26","@vaadin/vaadin-checkBox": "2.5.0","@vaadin/vaadin-details": "1.2.0","@polymer/iron-icon": "3.0.1","@vaadin/vaadin-time-picker": "2.4.0","@vaadin/vaadin-context-menu": "4.5.0","@vaadin/vaadin-avatar": "1.0.4","@polymer/paper-styles": "^3.0.0-pre.26","@polymer/paper-progress": "^3.0.0-pre.26","@polymer/iron-form-element-behavior": "^3.0.0-pre.26","ace-builds": "1.4.11","@vaadin/vaadin-radio-button": "1.5.1","@vaadin/vaadin-tabs": "3.2.0","@vaadin/vaadin-lumo-styles": "1.6.0","@polymer/paper-input": "^3.0.0-pre.26","@vaadin/vaadin-material-styles": "1.3.2","multiselect-combo-Box": "2.4.2","lit-html": "1.4.1"
    },"devDependencies": {
      "webpack-babel-multi-target-plugin": "2.3.3","copy-webpack-plugin": "5.1.2","compression-webpack-plugin": "4.0.1","raw-loader": "3.1.0","webpack-cli": "3.3.11","webpack": "4.42.0","chokidar": "^3.5.0","webpack-merge": "4.2.2","webpack-dev-server": "3.11.0","ts-loader": "8.0.12","typescript": "4.0.3","css-loader": "4.2.1","file-loader": "6.1.0","extra-watch-webpack-plugin": "1.0.3","lit-css-loader": "0.0.4","construct-style-sheets-polyfill": "2.4.6","extract-loader": "5.1.0"
    },"hash": "28d13379629acf9d66c70f26c453a26d2ee9c64e8b2ebb944fe35289c7ac1656"
  },"dependencies": {
    "lit-element": "2.5.1","lit-html": "1.4.1","lumo-css-framework": "^3.0.11"
  },"devDependencies": {
    "webpack-babel-multi-target-plugin": "2.3.3","extract-loader": "5.1.0"
  }
}

Thankssss

解决方法

我已经测试了您添加到 github issue 的主题项目，从 *.generated.js 文件夹中删除生成的文件 (src/main/resources/META-INF/resources/themes/*/) 后，我可以将主题工件安装到另一个项目和两个主题都很好。

因此，您只需删除那些生成的文件即可让您的主题正常工作。 同时，我们应该将生成的主题文件移动到 frontend/generated 以便它们不会意外包含到可重用的 .jar 文件中。这是它在 Vaadin 19+ 中的工作方式，但尚未在 14.6 中向后移植。我也会在 v14 文档中强调这一点。

,

该错误仅发生在 Firefox 开发者版（也在 Firefox 中）...

浏览器版本（如果适用）：90.0b4（64 位）

Chrome 浏览器（版本 91.0.4472.77（官方版本）（64 位））和 Edge 工作正常。