replace popover renderer with slotted content

Author: sissbruecker

src/component/vcf-breadcrumbs.ts

@@ -274,7 +274,7 @@ export class VcfBreadcrumbs extends ResizeMixin(ElementMixin(PolylitMixin(LitEle
    * @returns {HTMLElement} An ellipsis breadcrumb element with an associated popover
    */
   _createEllipsisBreadcrumb(hiddenItems: HTMLElement[]) {
-    let ellipsis = document.createElement("vcf-breadcrumb");
+    const ellipsis = document.createElement("vcf-breadcrumb");
     const id = "ellipsis-" + crypto.randomUUID();
     ellipsis.setAttribute("id", id);
     ellipsis.setAttribute("part", "ellipsis");
@@ -286,41 +286,36 @@ export class VcfBreadcrumbs extends ResizeMixin(ElementMixin(PolylitMixin(LitEle
     ellipsis.style.minWidth = '0';
 
     // Create a popover to show the hidden breadcumbs and add it to the ellipsis element
-    let popover = document.createElement("vaadin-popover");
+    const popover = document.createElement("vaadin-popover");
     popover.setAttribute("for", id);
     popover.setAttribute("overlay-role", "menu");
     popover.setAttribute('accessible-name-ref', "hidden breadcrumbs");
     popover.setAttribute("theme", "hidden-breadcrumbs");
     popover.setAttribute("position", "bottom-start");
     popover.setAttribute("modal", "true");
 
-    popover.renderer = (root) => {
-      // Ensure content is only added once
-      if (!root.firstChild) {
-        const verticalLayout = document.createElement('vaadin-vertical-layout');
-        verticalLayout.classList.add('hidden-breadcrumbs-layout');
-
-        // create new anchor elements for the hidden items and add them to the vertical layout
-        hiddenItems.forEach((element) => {
-          const item = document.createElement('a');
-          item.textContent = element.textContent;
-          item.setAttribute("href", element.getAttribute('href') ?? '');
-          item.setAttribute("role", "menuitem");
-          // Copy element class list
-          const elementClasses = Array.from(element.classList);
-          item.classList.add(...elementClasses);
-          item.classList.add("hidden-breadcrumb-anchor");
-
-          // Add click event to close popover when clicking an item
-          item.addEventListener("click", () => {
-            popover.opened = false;
-          });
-
-          verticalLayout.appendChild(item);
-        });
-        root.appendChild(verticalLayout);
-      }
-    };
+    const verticalLayout = document.createElement('vaadin-vertical-layout');
+    verticalLayout.classList.add('hidden-breadcrumbs-layout');
+
+    // create new anchor elements for the hidden items and add them to the vertical layout
+    hiddenItems.forEach((element) => {
+      const item = document.createElement('a');
+      item.textContent = element.textContent;
+      item.setAttribute("href", element.getAttribute('href') ?? '');
+      item.setAttribute("role", "menuitem");
+      // Copy element class list
+      const elementClasses = Array.from(element.classList);
+      item.classList.add(...elementClasses);
+      item.classList.add("hidden-breadcrumb-anchor");
+
+      // Add click event to close popover when clicking an item
+      item.addEventListener("click", () => {
+        popover.opened = false;
+      });
+
+      verticalLayout.appendChild(item);
+    });
+    popover.appendChild(verticalLayout);
 
     // append popover to ellipsis to move it later to the anchor within the container
     ellipsis.appendChild(popover);