NPM Module CSS file failed to load for DHTMLX Gantt

Hi, I’m starting to try Vaadin 14, I’m trying to create an addon that uses the Gantt from DHTMLX ( I have created a polymer project that successfully displays the Gantt, then I’m trying to call that web component from a Vaadin Addon project by adding the js file. The Addon project structure looks like the attached file. The code using the web component is this:

package com.neotropic.vaadin14.component.addon.gantt;

import com.vaadin.flow.component.Component;
import com.vaadin.flow.component.Tag;
import com.vaadin.flow.component.dependency.JsModule;
import com.vaadin.flow.component.dependency.NpmPackage;

@NpmPackage(value = "dhtmlx-gantt", version = "^6.2.6")
 If you wish to include your own JS modules in the add-on jar, add the module
 files to './src/main/resources/META-INF/resources/frontend' and insert an
 annotation @JsModule("./my-module.js") here.
public class PaperSlider extends Component {

    public PaperSlider() {


Then I created a demo project with Vaadin 14 - Spring Boot that on the MainView creates a PaperSlider object and add it to its layout.

package com.neotropic.gantt.demo.spring;

import com.neotropic.vaadin14.component.addon.gantt.PaperSlider;
import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.dependency.NpmPackage;
import com.vaadin.flow.component.notification.Notification;
import org.springframework.beans.factory.annotation.Autowired;

import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.router.Route;
import com.vaadin.flow.server.PWA;

@PWA(name = "Project Base for Vaadin Flow with Spring", shortName = "Project Base")
@NpmPackage(value = "dhtmlx-gantt", version = "^6.2.6")
public class MainView extends VerticalLayout {

    public MainView(@Autowired MessageBean bean) {
//        Button button = new Button("Click me",
//                e ->;
//        add(button);
        add(new PaperSlider());


If I run the demo it succesfully loads the gantt structure but it can’t load the CSS file that has to come from the DHTMLX-Gantt NPM Module so everything looks like a mess, like dozens of words one over the other. Is my process wrong? or there is something I’m missing in order to succesfully load the CSS file?

Hi I know it’s probably late, but i only recently started working with Vaadin. I have a work around for this. I don’t remember where i found it but i did find it after scouring the internet.

If your gantt-web-component.js is a polymer component file like this. You have to add a method _attachDom that attaches the polymer template to the DOM and not the shadow DOM. This way global styles get applied to the polymer element.


class GanttChart extends PolymerElement {

    static get template() {
        return html`
	_attachDom(dom) {
    static get is() {
          return 'gantt-chart';
    constructor() {

ah and yes you can add a css file to global css by simply putting the location of the css file. the location should be different in your case.

public class GanttChart extends PolymerTemplate<GanttViewerModel> {