A tree view is a hierarchical structure that provides nested levels of navigation.
Usage
<goat-tree-view id="tree-view" style="width: 300px;" selected-node="Blockchain">
<goat-tree-node label="Artificial intelligence"></goat-tree-node>
<goat-tree-node label="Blockchain"></goat-tree-node>
<goat-tree-node label="Cloud computing">
<goat-tree-node label="Containers"></goat-tree-node>
<goat-tree-node label="Databases"></goat-tree-node>
</goat-tree-node>
</goat-tree-view>
Events
const treeView = document.querySelector('#tree-view');
treeView.addEventListener('goat-tree-node--click', function(evt) {
myConsole.log(JSON.stringify(evt.detail.value, null, 4), 'goat-tree-node-click');
});