1

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

当我更改为我的应用程序时,每次打开它都会显示...

TypeError:无法访问属性“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",
    "@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",
    "lumo-css-framework": "^3.0.11"
  },
  "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"
  }
}

Thankssss
4

2 回答 2

3

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

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

于 2021-06-08T13:14:05.603 回答
0

该错误仅发生在 Firefox 开发者版中(也在 Firefox 中)...

浏览器版本(如果适用):90.0b4(64 位)

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

于 2021-06-08T15:34:55.810 回答