ApexTree 2.2, ApexGantt 3.19 and ApexSankey 1.13: Shadow DOM Support

ApexTree 2.2.0, ApexGantt 3.19.0 and ApexSankey 1.13.0 shipped on October 21, 2026 with the same change in each: shadow root support. No option or method changed, so upgrading needs no code change.

Key takeaways

• All three work inside a shadow root, such as a custom element or a Lit component.
• Styles, keyboard focus and tooltips (dropdowns in ApexGantt) stay inside the chart's own root.
• CSS variables set on the host reach ApexTree and ApexSankey.
• destroy() removes only what the chart added, and rendering no longer clears other content in the container.
• Upgrading is npm install apextree@2.2.0, apexgantt@3.19.0 or apexsankey@1.13.0.

Which behaviours changed?

Change	Release	What you will see	How to reverse it
Rendering keeps the container's other content	all three	Elements you placed in the container stay after render()	Empty the container yourself first
destroy() removes only the chart's DOM	all three	Your own content in the container survives teardown	Remove it yourself

How do I mount one in a web component?

Create it on an element inside the shadow root, and destroy it when the element leaves the page:

class OrgChart extends HTMLElement {
  constructor() {
    super()
    this.attachShadow({ mode: 'open' }).innerHTML = '<div class="tree"></div>'
  }
  connectedCallback() {
    this.tree = new ApexTree(this.shadowRoot.querySelector('.tree'), { width: 800, height: 500 })
    this.tree.render(data)
  }
  disconnectedCallback() {
    this.tree.destroy()
  }
}
customElements.define('org-chart', OrgChart)

ApexGantt and ApexSankey mount the same way. See the install pages for ApexTree, ApexGantt and ApexSankey, and Shadow DOM and Web Components for ApexCharts, which gained the same support in 8.4.1.

Upgrading

npm install apextree@2.2.0 apexgantt@3.19.0 apexsankey@1.13.0

Install only the ones you use. Pages that load the unversioned CDN URL are already on these releases. Earlier posts: ApexTree 2.0, ApexGantt 3.15, ApexSankey 1.11.

Frequently asked questions