Gantt is not working with Shadow DOM

[Dastagirireddy]

Not able to integrate Gantt with Shadow DOM. Live demo at https://codesandbox.io/s/pensive-payne-uuuqs?fontsize=14

I am facing below issue.

Could you please help me to resolve the issue?

[Maxim Gorkovsky]

Hello.
I tried to pick some code from that page to reproduce it locally but demo works for me on latest release. Please provide runnable test case.

[Dastagirireddy]

Can you check https://codesandbox.io/s/pensive-payne-uuuqs?fontsize=14 ?

class MyGantt extends HTMLElement {
  constructor() {
    super();

    this.attachShadow({
      mode: "open"
    });

    this.shadowRoot.innerHTML = `
      <style>
        @import 'https://www.bryntum.com/examples/build/gantt.stockholm.css?433787';
        .gantt_here {
          height: 100vh;
          width: 100%;
        }
      </style>
      <div class="gantt_here"></div>
    `;
  }

  connectedCallback() {
    const project = new bryntum.gantt.ProjectModel({
      startDate: "2017-01-01",

      eventsData: [
        {
          id: 1,
          name: "Write docs",
          expanded: true,
          children: [
            {
              id: 2,
              name: "Proof-read docs",
              startDate: "2017-01-02",
              endDate: "2017-01-09"
            },
            {
              id: 3,
              name: "Release docs",
              startDate: "2017-01-09",
              endDate: "2017-01-10"
            }
          ]
        }
      ],

      dependenciesData: [{ fromEvent: 2, toEvent: 3 }]
    });

    const gantt = new bryntum.gantt.Gantt({
      project: project,

      startDate: new Date(2017, 0, 1),
      endDate: new Date(2017, 0, 10),

      columns: [{ type: "name", field: "name", text: "Name" }],

      appendTo: this.shadowRoot.querySelector(".gantt_here")
    });
  }

  disConnectedCallback() {
    console.log("Disconnected..");
  }
}

customElements.define("my-gantt", MyGantt);

[Maxim Gorkovsky]

Reproduced, thank you for report.
I opened ticket here: https://app.assembla.com/spaces/bryntum/tickets/8841-trial-validation-code-fails-with-webcomponents/details

Workaround in your case is to include same theme to the page:

<link rel="stylesheet" href="https://www.bryntum.com/examples/build/gantt.stockholm.css?433787" />

[Dastagirireddy]

Thank you

[Dastagirireddy]

Shadow DOM issues:
1. Dependency line creation is not working
2. Not able to focus on progress bar using the keyboard
3. Right click on cell throwing target not defined exception

Live Demo: https://uuuqs.codesandbox.io/

[Maxim Gorkovsky]

Issues 1 and 3 should be resolved in next gantt release, which will happen in a matter of days.

Not able to focus on progress bar using the keyboard

Progress bar element is not focusable. Do you mean you cannot navigate between tasks using keyboard? I can reproduce it locally, ticket is here: https://app.assembla.com/spaces/bryntum/tickets/8879-task-navigation-with-keyboard-doesn--39-t-work-/details
Thank you for report.