tree-element 0.1.1 → 0.3.0

package/lib/dragAndDropHandler/iterateVisibleNodes.js

@@ -1,12 +1,12 @@
-const iterateVisibleNodes = (tree, {
-  handleAfterOpenFolder,
-  handleClosedFolder,
-  handleFirstNode,
-  handleNode,
-  handleOpenFolder
+let iterateVisibleNodes = (tree, {
+  _handleAfterOpenFolder: handleAfterOpenFolder,
+  _handleClosedFolder: handleClosedFolder,
+  _handleFirstNode: handleFirstNode,
+  _handleNode: handleNode,
+  _handleOpenFolder: handleOpenFolder
 }) => {
   let isFirstNode = true;
-  const iterate = (node, nextNode) => {
+  let iterate = (node, nextNode) => {
     let mustIterateInside = (node.is_open === true || !node.element) && node.hasChildren();
     let element = null;
 
@@ -27,25 +27,26 @@ const iterateVisibleNodes = (tree, {
         handleClosedFolder(node, nextNode, element);
       }
     }
-    if (mustIterateInside) {
-      const childrenLength = node.children.length;
-      node.children.forEach((_, i) => {
-        const child = node.children[i];
-        if (child) {
-          if (i === childrenLength - 1) {
-            iterate(child, null);
-          } else {
-            const nextChild = node.children[i + 1];
-            if (nextChild) {
-              iterate(child, nextChild);
-            }
+    if (!mustIterateInside) {
+      return;
+    }
+    let childrenLength = node.children.length;
+    for (let i of node.children.keys()) {
+      let child = node.children[i];
+      if (child) {
+        if (i === childrenLength - 1) {
+          iterate(child, null);
+        } else {
+          let nextChild = node.children[i + 1];
+          if (nextChild) {
+            iterate(child, nextChild);
           }
         }
-      });
-      if (node.is_open && element) {
-        handleAfterOpenFolder(node, nextNode);
       }
     }
+    if (node.is_open && element) {
+      handleAfterOpenFolder(node, nextNode);
+    }
   };
   iterate(tree, null);
 };

package/lib/dragAndDropHandler/iterateVisibleNodes.js.map

@@ -1 +1 @@
-{"version":3,"file":"iterateVisibleNodes.js","sources":["../../src/dragAndDropHandler/iterateVisibleNodes.ts"],"sourcesContent":["import type { Node } from \"../node\";\n\ninterface Options {\n    handleAfterOpenFolder: (node: Node, nextNode: Node | null) => void;\n    handleClosedFolder: (\n        node: Node,\n        nextNode: Node | null,\n        element: HTMLElement,\n    ) => void;\n    handleFirstNode: (node: Node) => void;\n    handleNode: (\n        node: Node,\n        nextNode: Node | null,\n        element: HTMLElement,\n    ) => void;\n\n    /*\n    override\n    return\n        - true: continue iterating\n        - false: stop iterating\n    */\n    handleOpenFolder: (node: Node, element: HTMLElement) => boolean;\n}\n\nconst iterateVisibleNodes = (\n    tree: Node,\n    {\n        handleAfterOpenFolder,\n        handleClosedFolder,\n        handleFirstNode,\n        handleNode,\n        handleOpenFolder,\n    }: Options,\n) => {\n    let isFirstNode = true;\n\n    const iterate = (node: Node, nextNode: Node | null): void => {\n        let mustIterateInside =\n            (node.is_open === true || !node.element) && node.hasChildren();\n\n        let element: HTMLElement | null = null;\n\n        // Is the element visible?\n        if (node.element?.offsetParent) {\n            element = node.element;\n\n            if (isFirstNode) {\n                handleFirstNode(node);\n                isFirstNode = false;\n            }\n\n            if (!node.hasChildren()) {\n                handleNode(node, nextNode, node.element);\n            } else if (node.is_open) {\n                if (!handleOpenFolder(node, node.element)) {\n                    mustIterateInside = false;\n                }\n            } else {\n                handleClosedFolder(node, nextNode, element);\n            }\n        }\n\n        if (mustIterateInside) {\n            const childrenLength = node.children.length;\n            node.children.forEach((_, i) => {\n                const child = node.children[i];\n\n                if (child) {\n                    if (i === childrenLength - 1) {\n                        iterate(child, null);\n                    } else {\n                        const nextChild = node.children[i + 1];\n\n                        if (nextChild) {\n                            iterate(child, nextChild);\n                        }\n                    }\n                }\n            });\n\n            if (node.is_open && element) {\n                handleAfterOpenFolder(node, nextNode);\n            }\n        }\n    };\n\n    iterate(tree, null);\n};\n\nexport default iterateVisibleNodes;\n"],"names":[],"mappings":"AAyBA,MAAM,mBAAmB,GAAG,CACxB,IAAU,EACV;EACI,qBAAqB;EACrB,kBAAkB;EAClB,eAAe;EACf,UAAU;AACV,EAAA;AACK,CAAC,KACT;EACD,IAAI,WAAW,GAAG,IAAI;AAEtB,EAAA,MAAM,OAAO,GAAG,CAAC,IAAU,EAAE,QAAqB,KAAW;AACzD,IAAA,IAAI,iBAAiB,GACjB,CAAC,IAAI,CAAC,OAAO,KAAK,IAAI,IAAI,CAAC,IAAI,CAAC,OAAO,KAAK,IAAI,CAAC,WAAW,EAAE;IAElE,IAAI,OAA2B,GAAG,IAAI;;AAEtC;AACA,IAAA,IAAI,IAAI,CAAC,OAAO,EAAE,YAAY,EAAE;MAC5B,OAAO,GAAG,IAAI,CAAC,OAAO;AAEtB,MAAA,IAAI,WAAW,EAAE;QACb,eAAe,CAAC,IAAI,CAAC;AACrB,QAAA,WAAW,GAAG,KAAK;AACvB,MAAA;AAEA,MAAA,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE;QACrB,UAAU,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,OAAO,CAAC;AAC5C,MAAA,CAAC,MAAM,IAAI,IAAI,CAAC,OAAO,EAAE;QACrB,IAAI,CAAC,gBAAgB,CAAC,IAAI,EAAE,IAAI,CAAC,OAAO,CAAC,EAAE;AACvC,UAAA,iBAAiB,GAAG,KAAK;AAC7B,QAAA;AACJ,MAAA,CAAC,MAAM;AACH,QAAA,kBAAkB,CAAC,IAAI,EAAE,QAAQ,EAAE,OAAO,CAAC;AAC/C,MAAA;AACJ,IAAA;AAEA,IAAA,IAAI,iBAAiB,EAAE;AACnB,MAAA,MAAM,cAAc,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM;MAC3C,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK;AAC5B,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;AAE9B,QAAA,IAAI,KAAK,EAAE;AACP,UAAA,IAAI,CAAC,KAAK,cAAc,GAAG,CAAC,EAAE;AAC1B,YAAA,OAAO,CAAC,KAAK,EAAE,IAAI,CAAC;AACxB,UAAA,CAAC,MAAM;YACH,MAAM,SAAS,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,CAAC;AAEtC,YAAA,IAAI,SAAS,EAAE;AACX,cAAA,OAAO,CAAC,KAAK,EAAE,SAAS,CAAC;AAC7B,YAAA;AACJ,UAAA;AACJ,QAAA;AACJ,MAAA,CAAC,CAAC;AAEF,MAAA,IAAI,IAAI,CAAC,OAAO,IAAI,OAAO,EAAE;AACzB,QAAA,qBAAqB,CAAC,IAAI,EAAE,QAAQ,CAAC;AACzC,MAAA;AACJ,IAAA;EACJ,CAAC;AAED,EAAA,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC;AACvB;;"}
+{"version":3,"file":"iterateVisibleNodes.js","sources":["../../src/dragAndDropHandler/iterateVisibleNodes.ts"],"sourcesContent":["import type { Node } from \"../node\";\n\ninterface Options {\n  handleAfterOpenFolder: (node: Node, nextNode: Node | null) => void;\n  handleClosedFolder: (\n    node: Node,\n    nextNode: Node | null,\n    element: HTMLElement,\n  ) => void;\n  handleFirstNode: (node: Node) => void;\n  handleNode: (node: Node, nextNode: Node | null, element: HTMLElement) => void;\n\n  /*\n    override\n    return\n        - true: continue iterating\n        - false: stop iterating\n    */\n  handleOpenFolder: (node: Node, element: HTMLElement) => boolean;\n}\n\nconst iterateVisibleNodes = (\n  tree: Node,\n  {\n    handleAfterOpenFolder,\n    handleClosedFolder,\n    handleFirstNode,\n    handleNode,\n    handleOpenFolder,\n  }: Options,\n) => {\n  let isFirstNode = true;\n\n  const iterate = (node: Node, nextNode: Node | null): void => {\n    let mustIterateInside =\n      (node.is_open === true || !node.element) && node.hasChildren();\n\n    let element: HTMLElement | null = null;\n\n    // Is the element visible?\n    if (node.element?.offsetParent) {\n      element = node.element;\n\n      if (isFirstNode) {\n        handleFirstNode(node);\n        isFirstNode = false;\n      }\n\n      if (!node.hasChildren()) {\n        handleNode(node, nextNode, node.element);\n      } else if (node.is_open) {\n        if (!handleOpenFolder(node, node.element)) {\n          mustIterateInside = false;\n        }\n      } else {\n        handleClosedFolder(node, nextNode, element);\n      }\n    }\n\n    if (!mustIterateInside) {\n      return;\n    }\n\n    const childrenLength = node.children.length;\n    for (const i of node.children.keys()) {\n      const child = node.children[i];\n\n      if (child) {\n        if (i === childrenLength - 1) {\n          iterate(child, null);\n        } else {\n          const nextChild = node.children[i + 1];\n\n          if (nextChild) {\n            iterate(child, nextChild);\n          }\n        }\n      }\n    }\n\n    if (node.is_open && element) {\n      handleAfterOpenFolder(node, nextNode);\n    }\n  };\n\n  iterate(tree, null);\n};\n\nexport default iterateVisibleNodes;\n"],"names":[],"mappings":"AAqBA,IAAM,mBAAmB,GAAG,CAC1B,IAAU,EACV;EACE,sBAAA,EAAA,qBAAqB;EACrB,mBAAA,EAAA,kBAAkB;EAClB,gBAAA,EAAA,eAAe;EACf,WAAA,EAAA,UAAU;AACV,EAAA,iBAAA,EAAA;AACO,CAAC,KACP;EACH,IAAI,WAAW,GAAG,IAAI;AAEtB,EAAA,IAAM,OAAO,GAAG,CAAC,IAAU,EAAE,QAAqB,KAAW;AAC3D,IAAA,IAAI,iBAAiB,GACnB,CAAC,IAAI,CAAC,OAAO,KAAK,IAAI,IAAI,CAAC,IAAI,CAAC,OAAO,KAAK,IAAI,CAAC,WAAW,EAAE;IAEhE,IAAI,OAA2B,GAAG,IAAI;;AAEtC;AACA,IAAA,IAAI,IAAI,CAAC,OAAO,EAAE,YAAY,EAAE;MAC9B,OAAO,GAAG,IAAI,CAAC,OAAO;AAEtB,MAAA,IAAI,WAAW,EAAE;QACf,eAAe,CAAC,IAAI,CAAC;AACrB,QAAA,WAAW,GAAG,KAAK;AACrB,MAAA;AAEA,MAAA,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE;QACvB,UAAU,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,OAAO,CAAC;AAC1C,MAAA,CAAC,MAAM,IAAI,IAAI,CAAC,OAAO,EAAE;QACvB,IAAI,CAAC,gBAAgB,CAAC,IAAI,EAAE,IAAI,CAAC,OAAO,CAAC,EAAE;AACzC,UAAA,iBAAiB,GAAG,KAAK;AAC3B,QAAA;AACF,MAAA,CAAC,MAAM;AACL,QAAA,kBAAkB,CAAC,IAAI,EAAE,QAAQ,EAAE,OAAO,CAAC;AAC7C,MAAA;AACF,IAAA;IAEA,IAAI,CAAC,iBAAiB,EAAE;AACtB,MAAA;AACF,IAAA;AAEA,IAAA,IAAM,cAAc,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM;IAC3C,KAAK,IAAM,CAAC,IAAI,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,EAAE;AACpC,MAAA,IAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;AAE9B,MAAA,IAAI,KAAK,EAAE;AACT,QAAA,IAAI,CAAC,KAAK,cAAc,GAAG,CAAC,EAAE;AAC5B,UAAA,OAAO,CAAC,KAAK,EAAE,IAAI,CAAC;AACtB,QAAA,CAAC,MAAM;UACL,IAAM,SAAS,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,CAAC;AAEtC,UAAA,IAAI,SAAS,EAAE;AACb,YAAA,OAAO,CAAC,KAAK,EAAE,SAAS,CAAC;AAC3B,UAAA;AACF,QAAA;AACF,MAAA;AACF,IAAA;AAEA,IAAA,IAAI,IAAI,CAAC,OAAO,IAAI,OAAO,EAAE;AAC3B,MAAA,qBAAqB,CAAC,IAAI,EAAE,QAAQ,CAAC;AACvC,IAAA;EACF,CAAC;AAED,EAAA,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC;AACrB;;"}

package/lib/dragAndDropHandler/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/dragAndDropHandler/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAE9C,MAAM,WAAW,QAAQ;IACrB,MAAM,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,MAAM,WAAW,OAAO;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,IAAI,CAAC;IACX,QAAQ,EAAE,QAAQ,CAAC;IACnB,GAAG,EAAE,MAAM,CAAC;CACf"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/dragAndDropHandler/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAE9C,MAAM,WAAW,QAAQ;IACvB,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB;AAED,MAAM,WAAW,OAAO;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,IAAI,CAAC;IACX,QAAQ,EAAE,QAAQ,CAAC;IACnB,GAAG,EAAE,MAAM,CAAC;CACb"}

package/lib/elementsRenderer.d.ts

@@ -3,6 +3,8 @@ import type { GetTree, IsNodeSelected } from "./methodTypes.js";
 import type { Node } from "./node.js";
 import type { IconElement, OnCreateLi } from "./options.js";
 interface ElementsRendererParams {
+    ariaLabel?: string;
+    ariaLabelledBy?: string;
     autoEscape: boolean;
     buttonLeft: boolean;
     classNames: ClassNames;
@@ -19,35 +21,46 @@ interface ElementsRendererParams {
     tabIndex?: number;
 }
 export default class ElementsRenderer {
-    closedIconElement?: HTMLElement | Text;
-    openedIconElement?: HTMLElement | Text;
+    closedIconElement?: globalThis.Node;
+    openedIconElement?: globalThis.Node;
+    private ariaLabel?;
+    private ariaLabelledBy?;
     private autoEscape;
     private buttonLeft;
     private classNames;
+    private closedFolderTemplate;
     private dragAndDrop;
     private getTree;
+    private groupUlTemplate;
     private htmlElement;
     private isNodeSelected;
+    private nodeTemplate;
     private onCreateLi?;
+    private openedFolderTemplate;
+    private rootUlTemplate;
     private rtl?;
     private setNodeElement;
     private showEmptyFolder;
     private tabIndex?;
-    constructor({ autoEscape, buttonLeft, classNames, closedIcon, dragAndDrop, getTree, htmlElement, isNodeSelected, onCreateLi, openedIcon, rtl, setNodeElement, showEmptyFolder, tabIndex, }: ElementsRendererParams);
+    constructor({ ariaLabel, ariaLabelledBy, autoEscape, buttonLeft, classNames, closedIcon, dragAndDrop, getTree, htmlElement, isNodeSelected, onCreateLi, openedIcon, rtl, setNodeElement, showEmptyFolder, tabIndex, }: ElementsRendererParams);
     render(fromNode: Node | null): void;
+    renderChildren(node: Node): HTMLUListElement | null;
     renderFromNode(node: Node): void;
     renderFromRoot(): void;
     private attachNodeData;
     private createButtonElement;
     private createDomElements;
     private createFolderLi;
+    private createFolderTemplate;
     private createLi;
+    private createLiTemplate;
     private createNodeLi;
-    private createTitleSpan;
-    private createUl;
+    private createNodeTemplate;
+    private createTitleSpanTemplate;
+    private createUlTemplate;
+    private fillTitleSpan;
     private getButtonClasses;
-    private getFolderClasses;
-    private setTreeItemAriaAttributes;
+    private mustRenderChildren;
 }
 export {};
 //# sourceMappingURL=elementsRenderer.d.ts.map

package/lib/elementsRenderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"elementsRenderer.d.ts","sourceRoot":"","sources":["../src/elementsRenderer.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAO,KAAK,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC7D,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AACnC,OAAO,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAIzD,UAAU,sBAAsB;IAC5B,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,EAAE,UAAU,CAAC;IACvB,UAAU,CAAC,EAAE,WAAW,CAAC;IACzB,WAAW,EAAE,OAAO,CAAC;IACrB,OAAO,EAAE,OAAO,CAAC;IACjB,WAAW,EAAE,WAAW,CAAC;IACzB,cAAc,EAAE,cAAc,CAAC;IAC/B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,UAAU,CAAC,EAAE,WAAW,CAAC;IACzB,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,cAAc,EAAE,CAAC,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAC3D,eAAe,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,CAAC,OAAO,OAAO,gBAAgB;IAC1B,iBAAiB,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACvC,iBAAiB,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC9C,OAAO,CAAC,UAAU,CAAU;IAC5B,OAAO,CAAC,UAAU,CAAU;IAC5B,OAAO,CAAC,UAAU,CAAa;IAC/B,OAAO,CAAC,WAAW,CAAU;IAC7B,OAAO,CAAC,OAAO,CAAU;IACzB,OAAO,CAAC,WAAW,CAAc;IACjC,OAAO,CAAC,cAAc,CAAiB;IACvC,OAAO,CAAC,UAAU,CAAC,CAAa;IAChC,OAAO,CAAC,GAAG,CAAC,CAAU;IACtB,OAAO,CAAC,cAAc,CAA6C;IACnE,OAAO,CAAC,eAAe,CAAU;IACjC,OAAO,CAAC,QAAQ,CAAC,CAAS;gBAEd,EACR,UAAU,EACV,UAAU,EACV,UAAU,EACV,UAAU,EACV,WAAW,EACX,OAAO,EACP,WAAW,EACX,cAAc,EACd,UAAU,EACV,UAAU,EACV,GAAG,EACH,cAAc,EACd,eAAe,EACf,QAAQ,GACX,EAAE,sBAAsB;IAiBlB,MAAM,CAAC,QAAQ,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI;IAQnC,cAAc,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI;IAahC,cAAc,IAAI,IAAI;IAU7B,OAAO,CAAC,cAAc;IAKtB,OAAO,CAAC,mBAAmB;IAgB3B,OAAO,CAAC,iBAAiB;IAmBzB,OAAO,CAAC,cAAc;IAyDtB,OAAO,CAAC,QAAQ;IAmBhB,OAAO,CAAC,YAAY;IAqCpB,OAAO,CAAC,eAAe;IAqCvB,OAAO,CAAC,QAAQ;IA4BhB,OAAO,CAAC,gBAAgB;IAgBxB,OAAO,CAAC,gBAAgB;IAkBxB,OAAO,CAAC,yBAAyB;CAWpC"}
+{"version":3,"file":"elementsRenderer.d.ts","sourceRoot":"","sources":["../src/elementsRenderer.ts"],"names":[],"mappings":"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"}

package/lib/elementsRenderer.js

@@ -1,36 +1,37 @@
 import { getBoolString } from './util.js';
 
+/* Renders the tree to html.
+ *
+ * The children of a closed folder are not rendered. They are rendered when
+ * the folder is opened, see renderChildren.
+ *
+ * The elements are created by cloning templates. A template is a fully
+ * built <li> or <ul> with everything that is the same for every node
+ * (structure, roles, static classes, the toggler icon). Per node only the
+ * parts that differ are set: the title, the aria attributes and the
+ * selected and loading classes.
+ */
 class ElementsRenderer {
-  closedIconElement;
-  openedIconElement;
-  _autoEscape;
-  _buttonLeft;
-  _classNames;
-  _dragAndDrop;
-  _getTree;
-  _htmlElement;
-  _isNodeSelected;
-  _onCreateLi;
-  _rtl;
-  _setNodeElement;
-  _showEmptyFolder;
-  _tabIndex;
   constructor({
-    autoEscape,
-    buttonLeft,
-    classNames,
-    closedIcon,
-    dragAndDrop,
-    getTree,
-    htmlElement,
-    isNodeSelected,
-    onCreateLi,
-    openedIcon,
-    rtl,
-    setNodeElement,
-    showEmptyFolder,
-    tabIndex
+    _ariaLabel: ariaLabel,
+    _ariaLabelledBy: ariaLabelledBy,
+    _autoEscape: autoEscape,
+    _buttonLeft: buttonLeft,
+    _classNames: classNames,
+    _closedIcon: closedIcon = "-",
+    _dragAndDrop: dragAndDrop,
+    _getTree: getTree,
+    _htmlElement: htmlElement,
+    _isNodeSelected: isNodeSelected,
+    _onCreateLi: onCreateLi,
+    _openedIcon: openedIcon = "+",
+    _rtl: rtl,
+    _setNodeElement: setNodeElement,
+    _showEmptyFolder: showEmptyFolder,
+    _tabIndex: tabIndex
   }) {
+    this._ariaLabel = ariaLabel;
+    this._ariaLabelledBy = ariaLabelledBy;
     this._autoEscape = autoEscape;
     this._buttonLeft = buttonLeft;
     this._classNames = classNames;
@@ -43,30 +44,42 @@ class ElementsRenderer {
     this._setNodeElement = setNodeElement;
     this._showEmptyFolder = showEmptyFolder;
     this._tabIndex = tabIndex;
-    this.openedIconElement = this._createButtonElement(openedIcon ?? "+");
-    this.closedIconElement = this._createButtonElement(closedIcon ?? "-");
+    this._openedIconElement = this._createButtonElement(openedIcon);
+    this._closedIconElement = this._createButtonElement(closedIcon);
+    this._rootUlTemplate = this._createUlTemplate(true);
+    this._groupUlTemplate = this._createUlTemplate(false);
+    this._nodeTemplate = this._createNodeTemplate();
+    this._openedFolderTemplate = this._createFolderTemplate(true);
+    this._closedFolderTemplate = this._createFolderTemplate(false);
   }
-  render(fromNode) {
+  _render(fromNode) {
     if (fromNode?.parent) {
-      this.renderFromNode(fromNode);
+      this._renderFromNode(fromNode);
     } else {
-      this.renderFromRoot();
+      this._renderFromRoot();
     }
   }
-  renderFromNode(node) {
+
+  /* Render the children of a rendered folder. Returns the new <ul>, or
+   * null when the folder is not rendered or has no children.
+   */
+  _renderChildren(node) {
+    return !node.element || !node.hasChildren() ? null : this._createDomElements(node.element, node.children, false, node.getLevel() + 1);
+  }
+  _renderFromNode(node) {
     if (!node.element) {
       return;
     }
-    const currentLi = node.element;
-    const newLi = this._createLi(node, node.getLevel());
+    let currentLi = node.element;
+    let newLi = this._createLi(node, node.getLevel());
     currentLi.replaceWith(newLi);
-
-    // create children
-    this._createDomElements(newLi, node.children, false, node.getLevel() + 1);
+    if (this._mustRenderChildren(node)) {
+      this._createDomElements(newLi, node.children, false, node.getLevel() + 1);
+    }
   }
-  renderFromRoot() {
-    this._htmlElement.textContent = '';
-    const tree = this._getTree();
+  _renderFromRoot() {
+    this._htmlElement.textContent = "";
+    let tree = this._getTree();
     if (tree) {
       this._createDomElements(this._htmlElement, tree.children, true, 1);
     }
@@ -75,61 +88,83 @@ class ElementsRenderer {
     node.element = li;
     this._setNodeElement(li, node);
   }
+
+  /* Returns the template of a toggler icon; it is cloned for every folder.
+   * A string is parsed as html and becomes a fragment, so it can hold
+   * entities, text and elements.
+   */
   _createButtonElement(value) {
     if (typeof value === "string") {
-      // convert value to html
-      const div = document.createElement("div");
-      div.innerHTML = value;
-      return document.createTextNode(div.innerHTML);
-    } else if (value.nodeType) {
-      return value;
-    } else {
-      return undefined;
+      let template = document.createElement("template");
+      // eslint-disable-next-line no-unsanitized/property -- icon options are documented to accept html
+      template.innerHTML = value;
+      return template.content;
     }
+    return value.nodeType ? value : undefined;
   }
   _createDomElements(element, children, isRootNode, level) {
-    const ul = this._createUl(isRootNode);
-    element.appendChild(ul);
-    for (const child of children) {
-      const li = this._createLi(child, level);
-      ul.appendChild(li);
-      if (child.hasChildren()) {
+    let template = isRootNode ? this._rootUlTemplate : this._groupUlTemplate;
+    let ul = template.cloneNode();
+    element.append(ul);
+    for (let child of children) {
+      let li = this._createLi(child, level);
+      ul.append(li);
+      if (this._mustRenderChildren(child)) {
         this._createDomElements(li, child.children, false, level + 1);
       }
     }
+    return ul;
   }
   _createFolderLi(node, level, isSelected) {
-    const buttonClasses = this._getButtonClasses(node);
-    const folderClasses = this._getFolderClasses(node, isSelected);
-    const iconElement = node.is_open ? this.openedIconElement : this.closedIconElement;
+    let template = node.is_open ? this._openedFolderTemplate : this._closedFolderTemplate;
+    let li = template.cloneNode(true);
+    if (isSelected) {
+      li.classList.add(this._classNames.selected);
+    }
 
-    // li
-    const li = document.createElement("li");
-    li.className = `${this._classNames.common} ${folderClasses}`;
-    li.setAttribute("role", "none");
+    // li > div > [toggler], title span, [toggler]
+    let div = li.firstChild;
+    let titleSpan = div.childNodes[this._buttonLeft ? 1 : 0];
+    this._fillTitleSpan(titleSpan, node.name, isSelected, level);
+    if (node.is_loading) {
+      li.classList.add(this._classNames.loading);
+      titleSpan.setAttribute("aria-busy", "true");
+    }
+    return li;
+  }
 
-    // div
-    const div = document.createElement("div");
-    div.className = `${this._classNames.element} ${this._classNames.common}`;
-    div.setAttribute("role", "none");
-    li.appendChild(div);
+  /* Template for a folder <li>:
+   *   li > div > [toggler], title span, [toggler]
+   * The toggler icon and the aria-expanded attribute depend on the open
+   * state, so there is a template for each.
+   */
+  _createFolderTemplate(isOpen) {
+    let liClasses = [this._classNames.common, this._classNames.folder];
+    if (!isOpen) {
+      liClasses.push(this._classNames.closed);
+    }
+    let li = this._createLiTemplate(liClasses.join(" "));
+    let div = li.firstChild;
 
-    // button link
-    const buttonLink = document.createElement("a");
-    buttonLink.className = buttonClasses;
+    // The toggler is hidden from screen readers: the icon is decoration, and
+    // aria-expanded on the treeitem has the open state.
+    let toggler = document.createElement("span");
+    toggler.className = this._getButtonClasses(isOpen);
+    toggler.setAttribute("aria-hidden", "true");
+    let iconElement = isOpen ? this._openedIconElement : this._closedIconElement;
     if (iconElement) {
-      buttonLink.appendChild(iconElement.cloneNode(true));
+      toggler.append(iconElement.cloneNode(true));
     }
     if (this._buttonLeft) {
-      div.appendChild(buttonLink);
+      div.append(toggler);
     }
 
     // title span
-    const titleSpan = this._createTitleSpan(node.name, isSelected, true, level);
-    titleSpan.setAttribute("aria-expanded", getBoolString(node.is_open));
-    div.appendChild(titleSpan);
+    let titleSpan = this._createTitleSpanTemplate(true);
+    titleSpan.setAttribute("aria-expanded", getBoolString(isOpen));
+    div.append(titleSpan);
     if (!this._buttonLeft) {
-      div.appendChild(buttonLink);
+      div.append(toggler);
     }
     return li;
   }
@@ -139,111 +174,135 @@ class ElementsRenderer {
    * Call onCreateLi
    */
   _createLi(node, level) {
-    const isSelected = this._isNodeSelected(node);
-    const mustShowFolder = node.isFolder() || node.isEmptyFolder && this._showEmptyFolder;
-    const li = mustShowFolder ? this._createFolderLi(node, level, isSelected) : this._createNodeLi(node, level, isSelected);
+    let isSelected = this._isNodeSelected(node);
+    let mustShowFolder = node.isFolder() || node.isEmptyFolder && this._showEmptyFolder;
+    let li = mustShowFolder ? this._createFolderLi(node, level, isSelected) : this._createNodeLi(node, level, isSelected);
     this._attachNodeData(node, li);
     if (this._onCreateLi) {
       this._onCreateLi(node, li, isSelected);
     }
     return li;
   }
-  _createNodeLi(node, level, isSelected) {
-    const liClasses = [this._classNames.common];
-    if (isSelected) {
-      liClasses.push(this._classNames.selected);
-    }
-    const classString = liClasses.join(" ");
 
-    // li
-    const li = document.createElement("li");
-    li.className = classString;
+  /*
+  Create the outer part of a <li> template: li > div
+  */
+  _createLiTemplate(liClasses) {
+    let li = document.createElement("li");
+    li.className = liClasses;
     li.setAttribute("role", "none");
-
-    // div
-    const div = document.createElement("div");
+    let div = document.createElement("div");
     div.className = `${this._classNames.element} ${this._classNames.common}`;
     div.setAttribute("role", "none");
-    li.appendChild(div);
+    li.append(div);
+    return li;
+  }
+  _createNodeLi(node, level, isSelected) {
+    let li = this._nodeTemplate.cloneNode(true);
+    if (isSelected) {
+      li.classList.add(this._classNames.selected);
+    }
 
-    // title span
-    const titleSpan = this._createTitleSpan(node.name, isSelected, false, level);
-    div.appendChild(titleSpan);
+    // li > div > title span
+    let div = li.firstChild;
+    let titleSpan = div.firstChild;
+    this._fillTitleSpan(titleSpan, node.name, isSelected, level);
     return li;
   }
-  _createTitleSpan(nodeName, isSelected, isFolder, level) {
-    const titleSpan = document.createElement("span");
+
+  /*
+  Template for a <li> without children: li > div > title span
+  */
+  _createNodeTemplate() {
+    let li = this._createLiTemplate(this._classNames.common);
+    let div = li.firstChild;
+    div.append(this._createTitleSpanTemplate(false));
+    return li;
+  }
+  _createTitleSpanTemplate(isFolder) {
+    let titleSpan = document.createElement("span");
     let classes = `${this._classNames.title} ${this._classNames.common}`;
     if (isFolder) {
       classes += ` ${this._classNames.titleFolder}`;
     }
     classes += ` ${this._buttonLeft ? this._classNames.titleButtonLeft : this._classNames.titleButtonRight}`;
     titleSpan.className = classes;
-    if (isSelected) {
-      const tabIndex = this._tabIndex;
-      if (tabIndex !== undefined) {
-        titleSpan.setAttribute("tabindex", `${tabIndex}`);
-      }
-    }
-    this._setTreeItemAriaAttributes(titleSpan, nodeName, level, isSelected);
-    if (this._autoEscape) {
-      titleSpan.textContent = nodeName;
-    } else {
-      titleSpan.innerHTML = nodeName;
+    titleSpan.setAttribute("role", "treeitem");
+    titleSpan.setAttribute("aria-selected", "false");
+
+    // Every node is focusable, but only the tab stop is in the tab order
+    if (this._tabIndex !== undefined) {
+      titleSpan.setAttribute("tabindex", "-1");
     }
     return titleSpan;
   }
-  _createUl(isRootNode) {
+  _createUlTemplate(isRootNode) {
     let classString;
     let role;
-    if (!isRootNode) {
-      classString = "";
-      role = "group";
-    } else {
+    if (isRootNode) {
       classString = this._classNames.tree;
       role = "tree";
       if (this._rtl) {
         classString += ` ${this._classNames.rtl}`;
       }
+    } else {
+      classString = "";
+      role = "group";
     }
     if (this._dragAndDrop) {
       classString += ` ${this._classNames.dnd}`;
     }
-    const ul = document.createElement("ul");
+    let ul = document.createElement("ul");
     ul.className = `${this._classNames.common} ${classString}`;
     ul.setAttribute("role", role);
+    if (isRootNode) {
+      if (this._ariaLabel !== undefined) {
+        ul.setAttribute("aria-label", this._ariaLabel);
+      }
+      if (this._ariaLabelledBy !== undefined) {
+        ul.setAttribute("aria-labelledby", this._ariaLabelledBy);
+      }
+    }
     return ul;
   }
-  _getButtonClasses(node) {
-    const classes = [this._classNames.toggler, this._classNames.common];
-    if (!node.is_open) {
-      classes.push(this._classNames.closed);
+
+  /*
+  Set the parts of a cloned title span that differ per node
+  */
+  _fillTitleSpan(titleSpan, nodeName, isSelected, level) {
+    titleSpan.setAttribute("aria-level", String(level));
+    if (isSelected) {
+      titleSpan.setAttribute("aria-selected", "true");
+      let tabIndex = this._tabIndex;
+      if (tabIndex !== undefined) {
+        titleSpan.setAttribute("tabindex", String(tabIndex));
+      }
     }
-    if (this._buttonLeft) {
-      classes.push(this._classNames.togglerLeft);
+    if (this._autoEscape) {
+      titleSpan.textContent = nodeName;
     } else {
-      classes.push(this._classNames.togglerRight);
+      // eslint-disable-next-line no-unsanitized/property -- the user opted out of escaping with autoEscape: false
+      titleSpan.innerHTML = nodeName;
     }
-    return classes.join(" ");
   }
-  _getFolderClasses(node, isSelected) {
-    const classes = [this._classNames.folder];
-    if (!node.is_open) {
+  _getButtonClasses(isOpen) {
+    let classes = [this._classNames.toggler, this._classNames.common];
+    if (!isOpen) {
       classes.push(this._classNames.closed);
     }
-    if (isSelected) {
-      classes.push(this._classNames.selected);
-    }
-    if (node.is_loading) {
-      classes.push(this._classNames.loading);
+    if (this._buttonLeft) {
+      classes.push(this._classNames.togglerLeft);
+    } else {
+      classes.push(this._classNames.togglerRight);
     }
     return classes.join(" ");
   }
-  _setTreeItemAriaAttributes(element, name, level, isSelected) {
-    element.setAttribute("aria-label", name);
-    element.setAttribute("aria-level", `${level}`);
-    element.setAttribute("aria-selected", getBoolString(isSelected));
-    element.setAttribute("role", "treeitem");
+
+  /*
+  The children of a closed folder are rendered when it is opened
+  */
+  _mustRenderChildren(node) {
+    return node.hasChildren() && node.is_open === true;
   }
 }