diff --git a/.github/workflows/check-projects.yml b/.github/workflows/check-projects.yml
index c6fd76da..ead80d69 100644
--- a/.github/workflows/check-projects.yml
+++ b/.github/workflows/check-projects.yml
@@ -44,6 +44,7 @@ jobs:
project:
- javascript-vanilla-with-webpack
- typescript-angular
+ - typescript-lit-element
- typescript-vanilla-with-parcel
- typescript-vanilla-with-rollup
- typescript-vanilla-with-vitejs
diff --git a/README.md b/README.md
index a902c1c5..3985e3be 100644
--- a/README.md
+++ b/README.md
@@ -155,6 +155,7 @@ Custom BPMN Theme features will be progressively added to `bpmn-visualization`.
Show how to integrate `bpmn-visualization` in project, using various kind of frameworks, build tools and bundlers:
- [JavaScript + Webpack](projects/javascript-vanilla-with-webpack/README.md) - integration in a vanilla JavaScript Webpack project
- [TypeScript + Angular](projects/typescript-angular/README.md) - integration in a TypeScript Angular project
+- [TypeScript + Lit Element](projects/typescript-lit-element/README.md) - integration in a TypeScript Lit-Element project
- [TypeScript + Parcel](projects/typescript-vanilla-with-parcel/README.md) - integration in a vanilla TypeScript Parcel project
- [TypeScript + Rollup](projects/typescript-vanilla-with-rollup/README.md) - integration in a vanilla TypeScript Rollup project
- [TypeScript + Vite](projects/typescript-vanilla-with-vitejs/README.md) - integration in a vanilla TypeScript Vite project
diff --git a/projects/typescript-lit-element/.gitignore b/projects/typescript-lit-element/.gitignore
new file mode 100644
index 00000000..2107e24e
--- /dev/null
+++ b/projects/typescript-lit-element/.gitignore
@@ -0,0 +1,25 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+package-lock.json
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/projects/typescript-lit-element/.npmrc b/projects/typescript-lit-element/.npmrc
new file mode 100644
index 00000000..cafe685a
--- /dev/null
+++ b/projects/typescript-lit-element/.npmrc
@@ -0,0 +1 @@
+package-lock=true
diff --git a/projects/typescript-lit-element/README.md b/projects/typescript-lit-element/README.md
new file mode 100644
index 00000000..48bdc33c
--- /dev/null
+++ b/projects/typescript-lit-element/README.md
@@ -0,0 +1,24 @@
+# Integrate `bpmn-visualization` in a lit-element TypeScript project built with Vite
+
+To run locally:
+
+1. `npm install`
+2. `npm start`
+3. [localhost app](http://localhost:5173)
+
+You will see the following diagram:
+
+
+
+The code calling `bpmn-visualization` to render the BPMN diagram is available in [index.ts](src/index.ts).
+
+If you want to bundle the application, run `npm run build` and then run `npm run preview` to access to a preview of the
+bundle application with http://localhost:4173.
+
+## Specific mxGraph patch to make it work
+
+To workaround bug [#2738](https://github.com/process-analytics/bpmn-visualization-js/issues/2738) "[BUG] Failed to execute 'getComputedStyle' when using lit",
+`mxGraph` is patched using [patch-package](https://www.npmjs.com/package/patch-package) as the root cause of the bug is an issue in the `mxGraph` code.
+
+The patch has been created by modifying manually `node_modules/mxgraph/javascript/dist/build.js`
+and then running: `npx patch-package mxgraph`
diff --git a/projects/typescript-lit-element/docs/home.png b/projects/typescript-lit-element/docs/home.png
new file mode 100644
index 00000000..09078245
Binary files /dev/null and b/projects/typescript-lit-element/docs/home.png differ
diff --git a/projects/typescript-lit-element/favicon.svg b/projects/typescript-lit-element/favicon.svg
new file mode 100644
index 00000000..537e9be6
--- /dev/null
+++ b/projects/typescript-lit-element/favicon.svg
@@ -0,0 +1 @@
+bpmn-visualization TypeScript Integration with lit-element
+
+
+
+ bpmn-visualization TypeScript Integration with lit-element
+
+
+
+ Flow_0i9hf3x
+
+
+ Flow_0i9hf3x
+ Flow_06ca3ya
+ Flow_169iupn
+ Flow_1ojqrz1
+
+
+ Flow_169iupn
+ Flow_0hpz0ab
+
+
+ Flow_1ojqrz1
+ Flow_1a9zw3d
+
+
+ Flow_1y1kscn
+ Flow_0j5xinh
+ Flow_1448s6h
+
+
+ Flow_0j5xinh
+ Flow_0jp4uz8
+ Flow_0wd8pwa
+
+
+ Flow_0jp4uz8
+ Flow_0pu7ps3
+
+
+ Flow_0wd8pwa
+ Flow_0pu7ps3
+ Flow_1nxinu7
+
+
+ Flow_1nxinu7
+ Flow_14tr1q9
+ Flow_19cdedl
+
+
+ Flow_1448s6h
+ Flow_14tr1q9
+
+
+ Flow_19cdedl
+ Flow_0hpz0ab
+ Flow_1a9zw3d
+ Flow_06uo70h
+
+
+ Flow_06uo70h
+ Flow_0lrixjg
+
+
+ Flow_0lrixjg
+ Flow_1r9qd61
+ Flow_1lkft1n
+
+
+ Flow_1r9qd61
+ Flow_1vzcv72
+
+
+ Flow_1lkft1n
+ Flow_1vzcv72
+ Flow_1kkicvr
+
+
+ Flow_1kkicvr
+ Flow_12q12yb
+
+
+ Flow_12q12yb
+
+
+ Flow_06ca3ya
+ Flow_1y1kscn
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/projects/typescript-lit-element/src/index.ts b/projects/typescript-lit-element/src/index.ts
new file mode 100644
index 00000000..0476a533
--- /dev/null
+++ b/projects/typescript-lit-element/src/index.ts
@@ -0,0 +1,23 @@
+import { LitElement, html } from "lit";
+import { customElement } from "lit/decorators.js";
+import { BpmnVisualization, FitType } from "bpmn-visualization";
+// The BPMN diagram, loaded as string. The '?.raw' extension support is provided by Vite.
+// for other load methods, see https://github.com/process-analytics/bpmn-visualization-examples
+import diagram from './diagram.bpmn?raw';
+import "./style.css";
+
+@customElement("bpmn-diag")
+export class BPMN extends LitElement {
+ firstUpdated(): void {
+ const bpmnVisualization = new BpmnVisualization({
+ container: this.renderRoot.querySelector("#bpmn-container"),
+ });
+ bpmnVisualization.load(diagram, {
+ fit: { type: FitType.Center, margin: 10 },
+ });
+ }
+
+ render() {
+ return html`
`;
+ }
+}
diff --git a/projects/typescript-lit-element/src/style.css b/projects/typescript-lit-element/src/style.css
new file mode 100644
index 00000000..04653b75
--- /dev/null
+++ b/projects/typescript-lit-element/src/style.css
@@ -0,0 +1,26 @@
+body {
+ font-family: Avenir, Helvetica, Arial, sans-serif;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ color: #2c3e50;
+}
+footer {
+ position: absolute;
+ bottom: 1rem;
+ right: 1rem;
+ z-index: 1;
+}
+
+.title {
+ text-align: center;
+ margin-top: 3rem;
+}
+
+.bpmn-highlight.bpmn-task > rect {
+ fill: pink;
+ fill-opacity: 30%;
+ stroke: coral;
+}
+.bpmn-highlight.bpmn-task > rect:hover {
+ fill-opacity: 70%;
+}
diff --git a/projects/typescript-lit-element/src/vite-env.d.ts b/projects/typescript-lit-element/src/vite-env.d.ts
new file mode 100644
index 00000000..11f02fe2
--- /dev/null
+++ b/projects/typescript-lit-element/src/vite-env.d.ts
@@ -0,0 +1 @@
+///