diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/TreeIndentRenderer.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/TreeIndentRenderer.java
index ce63cae..5e64307 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/TreeIndentRenderer.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/TreeIndentRenderer.java
@@ -54,9 +54,7 @@
     }
 
     final boolean folder = node.isFolder();
-    final int level = node.getLevel();
     final boolean showJunctions = treeIndent.isShowJunctions();
-    final boolean showRootJunction = data.isShowRootJunction();
     final boolean expanded = folder && data.getExpandedState().isExpanded(node.getPath());
 
     final TobagoResponseWriter writer = getResponseWriter(facesContext);
@@ -70,7 +68,7 @@
         treeIndent.getCustomClass());
 
     // encode tree junction
-    if (!showJunctions || !showRootJunction && level == 0) {
+    if (!showJunctions) {
       return;
     }
     writer.startElement(HtmlElements.I);
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/TreeNodeRenderer.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/TreeNodeRenderer.java
index 8d65b5b..2569227 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/TreeNodeRenderer.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/TreeNodeRenderer.java
@@ -33,6 +33,7 @@
 import org.apache.myfaces.tobago.renderkit.RendererBase;
 import org.apache.myfaces.tobago.renderkit.css.BootstrapClass;
 import org.apache.myfaces.tobago.renderkit.css.TobagoClass;
+import org.apache.myfaces.tobago.renderkit.html.CustomAttributes;
 import org.apache.myfaces.tobago.renderkit.html.DataAttributes;
 import org.apache.myfaces.tobago.renderkit.html.HtmlAttributes;
 import org.apache.myfaces.tobago.renderkit.html.HtmlElements;
@@ -84,7 +85,7 @@
 
       // select
       if (data.getSelectable() != Selectable.none) { // selection
-         String selected = requestParameterMap.get(
+        String selected = requestParameterMap.get(
             clientId + ComponentUtils.SUB_SEPARATOR + AbstractUIData.SUFFIX_SELECTED);
 // todo        JsonUtils.decodeIntegerArray()StringArray()
         selected = selected.replaceAll("\\[", ";");
@@ -128,7 +129,9 @@
     Markup markup = Markup.NULL;
     final TreePath path = node.getPath();
     final SelectedState selectedState = data.getSelectedState();
-    if (data instanceof AbstractUITree && selectedState.isSelected(path)) {
+    final boolean selected = data instanceof AbstractUITree && selectedState.isSelected(path);
+
+    if (selected) {
       markup = markup.add(Markup.SELECTED);
     }
     if (folder) {
@@ -149,7 +152,7 @@
       writer.writeAttribute(HtmlAttributes.SELECTED, selectedState.isAncestorOfSelected(path));
       writer.writeAttribute(DataAttributes.ROW_INDEX, data.getRowIndex());
     } else {
-      writer.startElement(HtmlElements.DIV);
+      writer.startElement(HtmlElements.TOBAGO_TREE_NODE);
 
       // div id
       writer.writeIdAttribute(clientId);
@@ -158,16 +161,20 @@
       final boolean hidden = !dataRendersRowContainer && !visible;
 
       writer.writeClassAttribute(
-          TobagoClass.TREE_NODE,
+          null,
           TobagoClass.TREE_NODE.createMarkup(markup),
           hidden ? BootstrapClass.D_NONE : null,
           node.getCustomClass());
+      writer.writeAttribute(CustomAttributes.SELECTED, selected);
+      writer.writeAttribute(CustomAttributes.EXPANDABLE, folder);
+      writer.writeAttribute(CustomAttributes.INDEX, data.getRowIndex());
       HtmlRendererUtils.writeDataAttributes(facesContext, writer, node);
       if (parentId != null) {
         // TODO: replace with
         // todo writer.writeIdAttribute(parentId + SUB_SEPARATOR + AbstractUITree.SUFFIX_PARENT);
         // todo like in TreeListboxRenderer
         writer.writeAttribute(DataAttributes.TREE_PARENT, parentId, false);
+        writer.writeAttribute(CustomAttributes.PARENT, parentId, false);
       }
       writer.writeAttribute(DataAttributes.LEVEL, data.isShowRoot() ? node.getLevel() : node.getLevel() - 1);
     }
@@ -189,7 +196,7 @@
       }
       writer.endElement(HtmlElements.OPTION);
     } else {
-      writer.endElement(HtmlElements.DIV);
+      writer.endElement(HtmlElements.TOBAGO_TREE_NODE);
     }
   }
 }
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/TreeRenderer.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/TreeRenderer.java
index 382cfa5..81daec0 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/TreeRenderer.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/TreeRenderer.java
@@ -33,6 +33,7 @@
 import org.apache.myfaces.tobago.model.TreePath;
 import org.apache.myfaces.tobago.renderkit.RendererBase;
 import org.apache.myfaces.tobago.renderkit.css.TobagoClass;
+import org.apache.myfaces.tobago.renderkit.html.CustomAttributes;
 import org.apache.myfaces.tobago.renderkit.html.DataAttributes;
 import org.apache.myfaces.tobago.renderkit.html.HtmlAttributes;
 import org.apache.myfaces.tobago.renderkit.html.HtmlElements;
@@ -95,18 +96,18 @@
       return;
     }
 
-    writer.startElement(HtmlElements.DIV);
+    writer.startElement(HtmlElements.TOBAGO_TREE);
     writer.writeIdAttribute(clientId);
     writer.writeClassAttribute(
-        TobagoClass.TREE,
-        TobagoClass.TREE.createMarkup(markup),
-        tree.getCustomClass());
+        tree.getCustomClass(),
+        TobagoClass.TREE.createMarkup(markup));
     HtmlRendererUtils.writeDataAttributes(facesContext, writer, tree);
     writer.writeAttribute(DataAttributes.SCROLL_PANEL, Boolean.TRUE.toString(), false);
 
     final Selectable selectable = tree.getSelectable();
     if (selectable.isSupportedByTree()) {
       writer.writeAttribute(DataAttributes.SELECTABLE, selectable.name(), false);
+      writer.writeAttribute(CustomAttributes.SELECTABLE, selectable.name(), false);
     }
 
     final SelectedState selectedState = tree.getSelectedState();
@@ -168,6 +169,6 @@
     writer.writeAttribute(DataAttributes.SCROLL_POSITION, Boolean.TRUE.toString(), false);
     writer.endElement(HtmlElements.INPUT);
 
-    writer.endElement(HtmlElements.DIV);
+    writer.endElement(HtmlElements.TOBAGO_TREE);
   }
 }
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/TreeSelectRenderer.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/TreeSelectRenderer.java
index 54b7dfd..6c6321b 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/TreeSelectRenderer.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/TreeSelectRenderer.java
@@ -51,6 +51,8 @@
   @Override
   public void decode(final FacesContext facesContext, final UIComponent component) {
 
+    // TODO do we need this?
+
     final AbstractUITreeSelect select = (AbstractUITreeSelect) component;
     final AbstractUITreeNodeBase node = ComponentUtils.findAncestor(select, AbstractUITreeNodeBase.class);
     final AbstractUIData data = ComponentUtils.findAncestor(node, AbstractUIData.class);
@@ -105,12 +107,11 @@
     final boolean folder = data.isFolder();
     final Selectable selectable = data.getSelectable();
 
-    writer.startElement(HtmlElements.SPAN);
+    writer.startElement(HtmlElements.TOBAGO_TREE_SELECT);
     final Markup markup = treeSelect.getMarkup();
     writer.writeClassAttribute(
-        TobagoClass.TREE_SELECT,
-        TobagoClass.TREE_SELECT.createMarkup(markup),
-        treeSelect.getCustomClass());
+        treeSelect.getCustomClass(),
+        TobagoClass.TREE_SELECT.createMarkup(markup));
     HtmlRendererUtils.writeDataAttributes(facesContext, writer, treeSelect);
 
     if (treeSelect.isShowCheckbox()
@@ -149,7 +150,7 @@
       writer.endElement(HtmlElements.LABEL);
     }
 
-    writer.endElement(HtmlElements.SPAN);
+    writer.endElement(HtmlElements.TOBAGO_TREE_SELECT);
   }
 
   private String getClientIdWithoutRowIndex(final AbstractUIData data, final String id) {
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/html/CustomAttributes.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/html/CustomAttributes.java
index af6aade..4a975ce 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/html/CustomAttributes.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/html/CustomAttributes.java
@@ -31,6 +31,7 @@
    * &lt;f:ajax&gt; attribute
    */
   EXECUTE("execute"),
+  EXPANDABLE("expandable"),
   FOCUS_ID("focus-id"),
   /**
    * The index of the tab inside the tab group.
@@ -41,6 +42,9 @@
   MIN_CHARS("min-chars"),
   OMIT("omit"),
   ORIENTATION("orientation"),
+  PARENT("parent"),
+  SELECTABLE("selectable"),
+  SELECTED("selected"),
   /**
    * &lt;f:ajax&gt; attribute
    */
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/html/DataAttributes.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/html/DataAttributes.java
index bb8cdb6..c3b60e0 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/html/DataAttributes.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/html/DataAttributes.java
@@ -139,7 +139,9 @@
 
   /**
    * The selectable attribute e. g. for trees.
+   * @deprecated since 5.0.0, please use {@link CustomAttributes#SELECTABLE}
    */
+  @Deprecated
   SELECTABLE("data-tobago-selectable"),
 
   /**
@@ -174,6 +176,7 @@
 
   /**
    * Id of the parent node in a tree node.
+   * @deprecated since 5.0.0, please use {@link CustomAttributes#PARENT}
    */
   TREE_PARENT("data-tobago-tree-parent"),
 
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/html/HtmlElements.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/html/HtmlElements.java
index 5394f3c..1294afa 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/html/HtmlElements.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/html/HtmlElements.java
@@ -143,7 +143,10 @@
   TOBAGO_SUGGEST("tobago-suggest"),
   TOBAGO_TAB("tobago-tab"),
   TOBAGO_TAB_CONTENT("tobago-tab-content"),
-  TOBAGO_TAB_GROUP("tobago-tab-group");
+  TOBAGO_TAB_GROUP("tobago-tab-group"),
+  TOBAGO_TREE("tobago-tree"),
+  TOBAGO_TREE_NODE("tobago-tree-node"),
+  TOBAGO_TREE_SELECT("tobago-tree-select");
 
   private final String value;
   private final boolean voidElement;
diff --git a/tobago-core/src/main/resources/scss/_tobago.scss b/tobago-core/src/main/resources/scss/_tobago.scss
index 046b925..7d7ff77 100644
--- a/tobago-core/src/main/resources/scss/_tobago.scss
+++ b/tobago-core/src/main/resources/scss/_tobago.scss
@@ -1526,9 +1526,19 @@
   margin-left: 7rem;
 }
 
-@for $i from 0 through 20 {
-  .tobago-treeNode[data-tobago-level='#{$i}'] {
-    margin-left: #{$i}rem;
+tobago-tree {
+  tobago-tree-node {
+    display: block;
+
+    @for $i from 0 through 20 {
+      &[data-tobago-level='#{$i}'] {
+        margin-left: #{$i}rem;
+      }
+    }
+
+    tobago-tree-select {
+      display: inline;
+    }
   }
 }
 
diff --git a/tobago-core/src/test/java/org/apache/myfaces/tobago/model/SelectableUnitTest.java b/tobago-core/src/test/java/org/apache/myfaces/tobago/model/SelectableUnitTest.java
index e26ce79..dbed202 100644
--- a/tobago-core/src/test/java/org/apache/myfaces/tobago/model/SelectableUnitTest.java
+++ b/tobago-core/src/test/java/org/apache/myfaces/tobago/model/SelectableUnitTest.java
@@ -20,12 +20,56 @@
 package org.apache.myfaces.tobago.model;
 
 import org.apache.myfaces.tobago.util.EnumUnitTest;
+import org.junit.jupiter.api.Assertions;
 import org.junit.jupiter.api.Test;
 
+import java.io.IOException;
+import java.nio.charset.StandardCharsets;
+import java.nio.file.Files;
+import java.nio.file.Path;
+import java.nio.file.Paths;
+import java.util.ArrayList;
+import java.util.List;
+
 public class SelectableUnitTest extends EnumUnitTest {
 
   @Test
   public void testNames() throws IllegalAccessException, NoSuchFieldException {
     testNames(Selectable.class);
   }
+
+  @Test
+  public void testTypeScript() throws IOException {
+    final Path path = Paths.get("").toAbsolutePath().getParent().resolve(
+        Paths.get("tobago-theme", "tobago-theme-standard", "src", "main", "npm", "ts", "tobago-selectable.ts"));
+
+    final List<String> words = getWords(path);
+
+    for (Selectable selectable : Selectable.values()) {
+      Assertions.assertTrue(words.contains(selectable.name()),
+          selectable.name() + " should be found in tobago-selectable.ts");
+    }
+  }
+
+  private List<String> getWords(final Path path) throws IOException {
+    List<String> words = new ArrayList<>();
+
+    final String fileContent = new String(Files.readAllBytes(path), StandardCharsets.UTF_8);
+
+
+    StringBuilder stringBuilder = new StringBuilder();
+
+    for (char c : fileContent.toCharArray()) {
+      if (('0' <= c && c <= '9')
+          || ('A' <= c && c <= 'Z')
+          || ('a' <= c && c <= 'z')) {
+        stringBuilder.append(c);
+      } else {
+        words.add(stringBuilder.toString());
+        stringBuilder = new StringBuilder();
+      }
+    }
+
+    return words;
+  }
 }
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/090-tree/01-select/Tree_Select.test.js b/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/090-tree/01-select/Tree_Select.test.js
index 7b638ed..6592f4c 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/090-tree/01-select/Tree_Select.test.js
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/090-tree/01-select/Tree_Select.test.js
@@ -24,7 +24,7 @@
   let outputFn = testFrameQuerySelectorFn("#page\\:mainForm\\:selectedNodesOutput span");
   let selectableNoneFn = testFrameQuerySelectorFn("#page\\:mainForm\\:selectable\\:\\:0");
   let selectableSingleFn = testFrameQuerySelectorFn("#page\\:mainForm\\:selectable\\:\\:1");
-  let inputFn = testFrameQuerySelectorFn(".tobago-treeSelect input");
+  let inputFn = testFrameQuerySelectorFn("tobago-tree-select input");
 
   let TTT = new TobagoTestTool(assert);
   TTT.action(function () {
@@ -68,7 +68,7 @@
   let outputFn = testFrameQuerySelectorFn("#page\\:mainForm\\:selectedNodesOutput span");
   let selectableNoneFn = testFrameQuerySelectorFn("#page\\:mainForm\\:selectable\\:\\:0");
   let selectableSingleLeafOnlyFn = testFrameQuerySelectorFn("#page\\:mainForm\\:selectable\\:\\:2");
-  let inputFn = testFrameQuerySelectorFn(".tobago-treeSelect input");
+  let inputFn = testFrameQuerySelectorFn("tobago-tree-select input");
 
   let TTT = new TobagoTestTool(assert);
   TTT.action(function () {
@@ -112,7 +112,7 @@
   let outputFn = testFrameQuerySelectorFn("#page\\:mainForm\\:selectedNodesOutput span");
   let selectableNoneFn = testFrameQuerySelectorFn("#page\\:mainForm\\:selectable\\:\\:0");
   let selectableMultiFn = testFrameQuerySelectorFn("#page\\:mainForm\\:selectable\\:\\:3");
-  let inputFn = testFrameQuerySelectorFn(".tobago-treeSelect input");
+  let inputFn = testFrameQuerySelectorFn("tobago-tree-select input");
 
   let TTT = new TobagoTestTool(assert);
   TTT.action(function () {
@@ -164,7 +164,7 @@
   let outputFn = testFrameQuerySelectorFn("#page\\:mainForm\\:selectedNodesOutput span");
   let selectableNoneFn = testFrameQuerySelectorFn("#page\\:mainForm\\:selectable\\:\\:0");
   let selectableMultiLeafOnlyFn = testFrameQuerySelectorFn("#page\\:mainForm\\:selectable\\:\\:4");
-  let inputFn = testFrameQuerySelectorFn(".tobago-treeSelect input");
+  let inputFn = testFrameQuerySelectorFn("tobago-tree-select input");
 
   let TTT = new TobagoTestTool(assert);
   TTT.action(function () {
@@ -217,7 +217,7 @@
   let outputFn = testFrameQuerySelectorFn("#page\\:mainForm\\:selectedNodesOutput span");
   let selectableNoneFn = testFrameQuerySelectorFn("#page\\:mainForm\\:selectable\\:\\:0");
   let selectableMultiCascadeFn = testFrameQuerySelectorFn("#page\\:mainForm\\:selectable\\:\\:5");
-  let inputFn = testFrameQuerySelectorFn(".tobago-treeSelect input");
+  let inputFn = testFrameQuerySelectorFn("tobago-tree-select input");
 
   let TTT = new TobagoTestTool(assert);
   TTT.action(function () {
diff --git a/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-selectable.ts b/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-selectable.ts
new file mode 100644
index 0000000..16db2e2
--- /dev/null
+++ b/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-selectable.ts
@@ -0,0 +1,11 @@
+export enum Selectable {
+  none, // Not selectable.
+  multi, // Multi selection possible. No other limitations.
+  single, // Only one item is selectable.
+  singleOrNone, // Only one of no item is selectable.
+  multiLeafOnly, // Only leafs are selectable.
+  singleLeafOnly, // Only one item is selectable and it must be a leaf.
+  sibling, // Only siblings are selectable.
+  siblingLeafOnly, // Only siblings are selectable and they have to be leafs.
+  multiCascade // Multi selection possible. When (de)selecting an item, the subtree will also be (un)selected.
+}
diff --git a/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-tree.ts b/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-tree.ts
index 0988f47..016f7ac 100644
--- a/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-tree.ts
+++ b/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-tree.ts
@@ -15,223 +15,269 @@
  * limitations under the License.
  */
 
-import {Listener, Phase} from "./tobago-listener";
-import {DomUtils} from "./tobago-utils";
+import {Selectable} from "./tobago-selectable";
 
-class Tree {
+export class Tree extends HTMLElement {
 
-  static toggleNode = function (event: MouseEvent) {
-    const element = event.currentTarget as HTMLElement;
-    const node: HTMLDivElement = element.closest(".tobago-treeNode") as HTMLDivElement;
-    const data = node.closest(".tobago-tree, .tobago-sheet") as HTMLElement;
-    const expanded = data.querySelector(
-        ":scope > .tobago-tree-expanded, :scope > .tobago-sheet-expanded") as HTMLInputElement;
-    const togglesIcon = node.querySelectorAll(".tobago-treeNode-toggle i") as NodeListOf<HTMLElement>;
-    const togglesImage = node.querySelectorAll(".tobago-treeNode-toggle img") as NodeListOf<HTMLImageElement>;
-    const rowIndex = Tree.rowIndex(node);
-    if (Tree.isExpanded(node, expanded)) {
-      Tree.hideChildren(node);
-      for (const icon of togglesIcon) {
-        icon.classList.remove(icon.dataset["tobagoOpen"]);
-        icon.classList.add(icon.dataset["tobagoClosed"]);
-      }
-      for (const image of togglesImage) {
-        let src = image.dataset["tobagoClosed"];
-        if (!src) { // use the open icon if there is no closed icon
-          src = image.dataset["tobagoOpen"];
-        }
-        image.setAttribute("src", src);
-      }
-      const set = Tree.getSet(expanded);
-      set.delete(rowIndex);
-      Tree.setSet(expanded, set);
-      node.classList.remove("tobago-treeNode-markup-expanded");
+  constructor() {
+    super();
+  }
+
+  connectedCallback() {
+  };
+
+  get isSheet(): boolean {
+    // TODO if sheet is implemented as custom element use:
+    // return this.tagName === "TOBAGO-SHEET";
+    return this.classList.contains("tobago-sheet");
+  }
+
+  clearSelectedNodes(): void {
+    this.hiddenInputSelected.value = "[]"; //empty set
+  }
+
+  addSelectedNode(selectedNode: number): void {
+    const selectedNodes = new Set(JSON.parse(this.hiddenInputSelected.value));
+    selectedNodes.add(selectedNode);
+    this.hiddenInputSelected.value = JSON.stringify(Array.from(selectedNodes));
+  }
+
+  deleteSelectedNode(selectedNode: number): void {
+    const selectedNodes = new Set(JSON.parse(this.hiddenInputSelected.value));
+    selectedNodes.delete(selectedNode);
+    this.hiddenInputSelected.value = JSON.stringify(Array.from(selectedNodes));
+  }
+
+  private get hiddenInputSelected(): HTMLInputElement {
+    if (this.isSheet) {
+      return this.querySelector(":scope > .tobago-sheet-selected");
     } else {
-      const reload = Tree.showChildren(node, expanded);
-      Tree.setSet(expanded, Tree.getSet(expanded).add(rowIndex));
-      if (reload) {
-        jsf.ajax.request(
-            node.id,
-            event,
-            {
-              //"javax.faces.behavior.event": "click",
-              execute: data.id,
-              render: data.id
-            });
-      } else {
-        for (const icon of togglesIcon) {
-          icon.classList.remove(icon.dataset["tobagoClosed"]);
-          icon.classList.add(icon.dataset["tobagoOpen"]);
-        }
-        for (const image of togglesImage) {
-          let src = image.dataset["tobagoOpen"];
-          if (!src) { // use the open icon if there is no closed icon
-            src = image.dataset["tobagoClosed"];
-          }
-          image.setAttribute("src", src);
-        }
-        node.classList.add("tobago-treeNode-markup-expanded");
-      }
+      return this.querySelector(":scope > .tobago-tree-selected");
     }
-  };
+  }
 
-  /**
-   * Hide all children of the node recursively.
-   * @param node A HTMLElement as a node of the tree.
-   */
-  static hideChildren = function (node: HTMLElement): void {
-    for (const child of Tree.findTreeChildren(node)) {
-      if (Tree.isInSheet(node)) {
-        child.parentElement.parentElement.classList.add("d-none");
-      } else {
-        child.classList.add("d-none");
-      }
-      Tree.hideChildren(child);
-    }
-  };
+  clearExpandedNodes(): void {
+    this.hiddenInputExpanded.value = "[]"; //empty set
+  }
 
-  /**
-   * Show the children of the node recursively, there parents are expanded.
-   * @param node A HTMLElement as a node of the tree.
-   * @param expanded The hidden field which contains the expanded state.
-   * @return is reload needed (to get all nodes from the server)
-   */
-  static showChildren = function (node: HTMLElement, expanded: HTMLInputElement): boolean {
-    const children = Tree.findTreeChildren(node);
-    if (children.length === 0) {
-      return true;
+  addExpandedNode(expandedNode: number): void {
+    const expandedNodes = new Set(JSON.parse(this.hiddenInputExpanded.value));
+    expandedNodes.add(expandedNode);
+    this.hiddenInputExpanded.value = JSON.stringify(Array.from(expandedNodes));
+  }
+
+  deleteExpandedNode(expandedNode: number): void {
+    const expandedNodes = new Set(JSON.parse(this.hiddenInputExpanded.value));
+    expandedNodes.delete(expandedNode);
+    this.hiddenInputExpanded.value = JSON.stringify(Array.from(expandedNodes));
+  }
+
+  get expandedNodes(): Set<number> {
+    return new Set(JSON.parse(this.hiddenInputExpanded.value));
+  }
+
+  private get hiddenInputExpanded(): HTMLInputElement {
+    if (this.isSheet) {
+      return this.querySelector(":scope > .tobago-sheet-expanded");
+    } else {
+      return this.querySelector(":scope > .tobago-tree-expanded");
     }
-    for (const child of children) {
-      if (Tree.isInSheet(node)) {
-        child.parentElement.parentElement.classList.remove("d-none");
-      } else {
-        child.classList.remove("d-none");
-      }
-      if (Tree.isExpanded(child, expanded)) {
-        const reload = Tree.showChildren(child, expanded);
-        if (reload) {
-          return true;
-        }
+  }
+
+  get selectable(): Selectable {
+    return Selectable[this.getAttribute("selectable")];
+  }
+}
+
+export class TreeNode extends HTMLElement {
+
+  constructor() {
+    super();
+  }
+
+  connectedCallback() {
+    if (this.isExpandable() && this.toggles !== null) {
+      this.toggles.forEach(element => element.addEventListener("click", this.toggleNode.bind(this)));
+    }
+  }
+
+  get tree(): Tree {
+    return this.closest("tobago-tree") as Tree; //TODO how to detect tobago-sheet?
+  }
+
+  isExpandable(): boolean {
+    return this.getAttribute("expandable") === "expandable";
+  }
+
+  isExpanded(): boolean {
+    for (const expandedNodeIndex of this.tree.expandedNodes) {
+      if (expandedNodeIndex === this.index) {
+        return true;
       }
     }
     return false;
-  };
-
-  static commandFocus = function (event: FocusEvent) {
-    const command = event.currentTarget as HTMLElement;
-    const node = command.parentElement;
-    const tree = node.closest(".tobago-tree");
-    const selected = tree.querySelector(".tobago-tree-selected") as HTMLInputElement;
-    selected.value = String(Tree.rowIndex(node));
-    for (const otherNode of tree.querySelectorAll(".tobago-treeNode-markup-selected")) {
-      if (otherNode !== node) {
-        otherNode.classList.remove("tobago-treeNode-markup-selected");
-      }
-    }
-    node.classList.add("tobago-treeNode-markup-selected");
-  };
-
-  static init = function (element: HTMLElement) {
-
-    for (const toggle of DomUtils.selfOrQuerySelectorAll(element, ".tobago-treeNode-markup-folder .tobago-treeNode-toggle")) {
-      toggle.addEventListener("click", Tree.toggleNode);
-    }
-
-    // selected for treeNode
-    for (const command of DomUtils.selfOrQuerySelectorAll(element, ".tobago-treeCommand")) {
-      command.addEventListener("focus", Tree.commandFocus);
-    }
-
-    for (const e of DomUtils.selfOrQuerySelectorAll(element, ".tobago-sheet, .tobago-tree")) {
-      const sheetOrTree: HTMLDivElement = e as HTMLDivElement;
-
-      // init selected field
-      const hiddenInputSelected: HTMLInputElement = sheetOrTree.querySelector(":scope > .tobago-sheet-selected, :scope > .tobago-tree-selected");
-      if (hiddenInputSelected) {
-        const value = new Set<number>();
-        for (const selected of sheetOrTree.querySelectorAll(".tobago-treeNode-markup-selected")) {
-          value.add(Tree.rowIndex(selected));
-        }
-        Tree.setSet(hiddenInputSelected, value);
-      }
-
-      // selected for treeSelect
-      for (const select of sheetOrTree.querySelectorAll(".tobago-treeSelect > input") as NodeListOf<HTMLInputElement>) {
-        let value: Set<number>;
-        // todo may use an class attribute for this value
-        if (select.type === "radio") {
-          value = new Set();
-          value.add(Tree.rowIndex(select));
-        } else if (select.checked) {
-          value = Tree.getSet(hiddenInputSelected);
-          value.add(Tree.rowIndex(select));
-        } else {
-          value = Tree.getSet(hiddenInputSelected);
-          value.delete(Tree.rowIndex(select));
-        }
-        Tree.setSet(hiddenInputSelected, value);
-      }
-
-      // init expanded field
-      const hiddenInputExpanded: HTMLInputElement = sheetOrTree.querySelector(":scope > .tobago-sheet-expanded, :scope > .tobago-tree-expanded");
-      if (hiddenInputExpanded) {
-        const value = new Set<number>();
-        for (const expanded of sheetOrTree.querySelectorAll(".tobago-treeNode-markup-expanded")) {
-          value.add(Tree.rowIndex(expanded));
-        }
-        Tree.setSet(hiddenInputExpanded, value);
-      }
-
-      // init tree selection for multiCascade
-      if (sheetOrTree.dataset.tobagoSelectable === "multiCascade") {
-        for (const treeNode of sheetOrTree.querySelectorAll(".tobago-treeNode") as NodeListOf<HTMLDivElement>) {
-
-          const checkbox: HTMLInputElement = treeNode.querySelector(".tobago-treeSelect input[type=checkbox]");
-          checkbox.addEventListener("change", function (event: Event) {
-            for (const childTreeNode of Tree.findTreeChildren(treeNode)) {
-              const childCheckbox: HTMLInputElement = childTreeNode.querySelector(".tobago-treeSelect input[type=checkbox]");
-              childCheckbox.checked = checkbox.checked;
-
-              const event = document.createEvent('HTMLEvents');
-              event.initEvent('change', true, false);
-              childCheckbox.dispatchEvent(event);
-            }
-          });
-        }
-      }
-    }
-  };
-
-  static getSet(element: HTMLInputElement): Set<number> {
-    return new Set(JSON.parse(element.value));
   }
 
-  static setSet(element, set: Set<number>) {
-    return element.value = JSON.stringify(Array.from(set));
-  }
-
-  static isExpanded = function (node: Element, expanded: HTMLInputElement) {
-    const rowIndex = Tree.rowIndex(node);
-    return Tree.getSet(expanded).has(rowIndex);
-  };
-
-  static rowIndex = function (node: Element): number { // todo: use attribute data-tobago-row-index
-    return parseInt(node.id.replace(/.+\:(\d+)(\:\w+)+/, '$1'));
-  };
-
-  static findTreeChildren = function (treeNode: HTMLElement): NodeListOf<HTMLDivElement> {
-    if (Tree.isInSheet(treeNode)) {
-      return treeNode.closest("tbody")
-          .querySelectorAll(".tobago-sheet-row[data-tobago-tree-parent='" + treeNode.id + "'] .tobago-treeNode");
+  get treeChildNodes(): NodeListOf<TreeNode> {
+    if (this.tree.isSheet) {
+      return this.closest("tbody").querySelectorAll("tobago-tree-node[parent='" + this.id + "']");
     } else {
-      return treeNode.parentElement.querySelectorAll(".tobago-treeNode[data-tobago-tree-parent='" + treeNode.id + "']");
+      return this.parentElement.querySelectorAll("tobago-tree-node[parent='" + this.id + "']");
     }
-  };
+  }
 
-  static isInSheet = function (node: Element) {
-    return node.parentElement.tagName === "TD";
-  };
+  get toggles(): NodeListOf<HTMLSpanElement> {
+    return this.querySelectorAll(".tobago-treeNode-toggle");
+  }
+
+  get icons(): NodeListOf<HTMLElement> {
+    return this.querySelectorAll(".tobago-treeNode-toggle i");
+  }
+
+  get images(): NodeListOf<HTMLImageElement> {
+    return this.querySelectorAll(".tobago-treeNode-toggle img");
+  }
+
+  get index(): number {
+    return Number(this.getAttribute("index"));
+  }
+
+  toggleNode(event: MouseEvent): void {
+    if (this.isExpanded()) {
+      for (const icon of this.icons) {
+        icon.classList.remove(icon.dataset.tobagoOpen);
+        icon.classList.add(icon.dataset.tobagoClosed);
+      }
+      for (const image of this.images) {
+        if (image.dataset.tobagoClosed) {
+          image.src = image.dataset.tobagoClosed;
+        } else {
+          image.src = image.dataset.tobagoOpen;
+        }
+      }
+
+      this.tree.deleteExpandedNode(this.index);
+      this.classList.remove("tobago-treeNode-markup-expanded");
+
+      this.hideNodes(this.treeChildNodes);
+    } else {
+      for (const icon of this.icons) {
+        icon.classList.remove(icon.dataset.tobagoClosed);
+        icon.classList.add(icon.dataset.tobagoOpen);
+      }
+      for (const image of this.images) {
+        if (image.dataset.tobagoOpen) {
+          image.src = image.dataset.tobagoOpen;
+        } else {
+          image.src = image.dataset.tobagoClosed;
+        }
+      }
+
+      this.tree.addExpandedNode(this.index);
+      this.classList.add("tobago-treeNode-markup-expanded");
+
+      if (this.treeChildNodes.length === 0) {
+        jsf.ajax.request(
+            this.id,
+            event,
+            {
+              //"javax.faces.behavior.event": "click",
+              execute: this.tree.id,
+              render: this.tree.id
+            });
+      } else {
+        this.showNodes(this.treeChildNodes);
+      }
+    }
+  }
+
+  hideNodes(treeChildNodes: NodeListOf<TreeNode>): void {
+    for (const treeChildNode of treeChildNodes) {
+
+      if (treeChildNode.tree.isSheet) {
+        treeChildNode.closest("tobago-sheet-row").classList.add("d-none");
+      } else {
+        treeChildNode.classList.add("d-none");
+      }
+
+      this.hideNodes(treeChildNode.treeChildNodes);
+    }
+  }
+
+  showNodes(treeChildNodes: NodeListOf<TreeNode>) {
+    for (const treeChildNode of treeChildNodes) {
+
+      if (treeChildNode.tree.isSheet) {
+        treeChildNode.closest("tobago-sheet-row").classList.remove("d-none");
+      } else {
+        treeChildNode.classList.remove("d-none");
+      }
+
+      this.showNodes(treeChildNode.treeChildNodes);
+    }
+  }
 }
 
-Listener.register(Tree.init, Phase.DOCUMENT_READY);
-Listener.register(Tree.init, Phase.AFTER_UPDATE);
+export class TreeSelect extends HTMLElement {
+
+  constructor() {
+    super();
+  }
+
+  connectedCallback() {
+    this.input.addEventListener("change", this.select.bind(this));
+
+    if (this.tree.selectable === Selectable.multiCascade) {
+      this.input.addEventListener("change", this.selectChildren.bind(this));
+    }
+  }
+
+  get tree(): Tree {
+    return this.closest("tobago-tree") as Tree;
+  }
+
+  get treeNode(): TreeNode {
+    return this.closest("tobago-tree-node") as TreeNode;
+  }
+
+  get input(): HTMLInputElement {
+    return this.querySelector("input");
+  }
+
+  select(event: Event): void {
+    switch (this.input.type) {
+      case "radio":
+        this.tree.clearSelectedNodes();
+        this.tree.addSelectedNode(this.treeNode.index);
+        break;
+      case "checkbox":
+        if (this.input.checked) {
+          this.tree.addSelectedNode(this.treeNode.index);
+        } else {
+          this.tree.deleteSelectedNode(this.treeNode.index);
+        }
+        break;
+    }
+  }
+
+  selectChildren(event: Event): void {
+    for (const treeChildNode of this.treeNode.treeChildNodes) {
+      const child: TreeSelect = treeChildNode.querySelector(":scope > tobago-tree-select");
+      child.input.checked = this.input.checked;
+
+      if (this.input.checked) {
+        this.tree.addSelectedNode(child.treeNode.index);
+      } else {
+        this.tree.deleteSelectedNode(child.treeNode.index);
+      }
+
+      child.input.dispatchEvent(new Event("change", {bubbles: true}));
+    }
+  }
+}
+
+document.addEventListener("DOMContentLoaded", function (event) {
+  window.customElements.define("tobago-tree-select", TreeSelect);
+  window.customElements.define("tobago-tree-node", TreeNode);
+  window.customElements.define("tobago-tree", Tree);
+});