xtal-treant | Vaadin

Web component wrapper around treant library

Published on webcomponents.org


xtal-treant is a dependency free web component wrapper around the great Treant library.

The web component requires a property, "config" to be set:

<xtal-treant config="[[treeBeard]]"></xtal-treant>

Because the library is designed to create different tree charts, based on a passed on css file, this raises a bit of a cunnundrum for a reusable web component. You can pass in the css file in the config setting. This will dynamically pass the css content into the shadow DOM. This currently has some issues in Chrome.

So the better alternative is to define a preload link in document.head:

<link class="treant css" relx="preload" as="fetch" href="../examples/basic-example/basic-example.css" data-postfix="basic">

Note the use of "treant" and "css" in the class, and the data-postfix value.

This will cause xtal-treant to dynamically create a new web component with name xtal-treant-basic, with the contents of the css file stamped into the template.

Install the Polymer-CLI

First, make sure you have the Polymer CLI installed. Then run polymer serve to serve your element locally.

Viewing Your Element

$ polymer serve

Running Tests



Link to this version
ImportedReleased 11 October 2018MIT License
Framework Support
Browser Independent
Install with
npm install xtal-treant"@0.0.3"
Run the above npm command in your project folder. If you have any issues installing, please contact the author.
Release notes - Version 0.0.3


  • treant-js#^1.0.1
  • xtal-latx#0.0.44