UMD Web Utilities Library
    Preparing search index...

    Function getLinkFromSlot

    • Retrieves the first anchor element from a slot element

      Searches for anchor elements within the provided slot element and returns the first one found. If multiple links are detected, it removes the parent elements (direct children of the slot) that contain the additional links, keeping only the first link and its parent. This ensures components that only support a single link maintain proper DOM structure.

      Parameters

      • slot: HTMLElement | null

        The slot element containing the anchor elements

      Returns HTMLAnchorElement | null

      The first HTMLAnchorElement if found, null otherwise

      // Single link in slot
      // HTML: <div slot="actions"><a href="/learn-more">Learn More</a></div>
      const actionSlot = element.querySelector('[slot="actions"]');
      const link = getLinkFromSlot(actionSlot);
      // Returns the anchor element

      // Multiple links - removes extra parent elements
      // HTML:
      // <div slot="actions">
      //   <div><a href="/link1">Link 1</a></div>
      //   <div><a href="/link2">Link 2</a></div>
      // </div>
      const actionSlot = element.querySelector('[slot="actions"]');
      const link = getLinkFromSlot(actionSlot);
      // Logs warning, removes second div, returns first anchor

      // Direct anchor element as slot
      // HTML: <a slot="actions" href="/read">Read More</a>
      const actionSlot = element.querySelector('[slot="actions"]');
      const link = getLinkFromSlot(actionSlot);
      // Returns the anchor element itself

    Settings

    Member Visibility