how to use dhtmlx-gantt in polymer?

[Zhaotiedan]

i have some issues when using dhtmlx-gantt with polymer. here are my code. it just shows data without style.

import { gantt } from 'dhtmlx-gantt';
import {computed, customElement, property} from '@polymer/decorators';
import {html, PolymerElement} from '@polymer/polymer';
import '../../../components/polymer/irons_and_papers';
import {LegacyElementMixin} from '../../../components/polymer/legacy_element_mixin';
import 'dhtmlx-gantt/codebase/dhtmlxgantt.css';

@customElement('tf-gantt-dashboard')
class TfGanttDashboard extends LegacyElementMixin(PolymerElement) {
  static readonly template = html`
    <div id="gantt_here" class='gantt-chart'></div>
  `;

  static readonly styles = `
    :host {
      display: block;
      height: 100%;
    }
  `;
  connectedCallback() {
    super.connectedCallback();
    gantt.config.xml_date = '%m-%d-%Y %H:%i';
    gantt.init(this.shadowRoot?.querySelector('#gantt_here') as HTMLElement);
    gantt.parse({
      data: [
        { id:1, text:"yyy", start_date:"01-04-2018", 
          duration:18, progress:0.4, open:true },
        { id:2, text:"zzz", start_date:"02-04-2018", 
          duration:8, progress:0.6, parent:1 },
        { id:3, text:"xxx", start_date:"11-04-2018", 
          duration:8, progress:0.6, parent:1 }
      ],
      links: [
        { id:1, source:1, target:2, type:"1" },
        { id:2, source:2, target:3, type:"0" }
      ]
    });
    // ...
  }
}

Is there have an example of using dhtmlx-gantt in polymer? can you provide some examples on dhtmlx-gantt working with polymer

[gearcoded]

@Zhaotiedan, Polymer and other libraries and frameworks are beyond our support. So, I cannot suggest to you how to add Gantt there in the way Polymer expects it.

I tried checking the ready demo on StackBlitz: https://stackblitz.com/edit/polymer-element-example

Sometimes it doesn't load because of the errors, sometimes it is able to load. But if I reload the preview frame (even without modifying the code), I get errors: https://snipboard.io/KBDPyS.jpg

Another example on Glitch says that the project is suspended: https://snipboard.io/2AjKz3.jpg

When I use this command to run a local project, I only get the HTML page without the Javascript code:

polymer serve --npm

https://snipboard.io/kIFbCh.jpg

As I couldn't run it locally, I cannot suggest what can help you.

The HTML examples work, so I was able to add Gantt there: https://files.dhtmlx.com/30d/fb3abaafd22720718c28d3c706fbd60f/index.html

But I don't think you plan using Gantt this way.

You can send me a ready demo with all the necessary files, which I can run locally, and I will try to add the styles there.