Custom Code in Shared Lib Components

As of 2025-Apr-06 Shared Libs do not directly support custom code. Ideally, someday, it will support;

• The ability to install site-wide code in the subscribing project, when the lib is used.
• The ability to install page-level code in the subscribing project, when a specific component is used
• The ability to define custom code profiles that can be then attached to specific component, so that e.g. 3 swiper components might all install the swiper.js lib ( but only once, no matter how many different versions you're using on that page ).

Workaround

However, Shared lib components can contain Embed elements, and those can be used to render custom code with each component instance.

There are a few ways to use this.

Install a Shared Lib Reference

Suppose you have a few components in your shared lib that require the Swiper.js library. You need to have the library loaded once, but only once.

Here's an example you can adapt to your situation;

<script>
(function loadSwiperIfNeeded() {
  const SWIPER_JS_URL = "https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js";
  const SWIPER_CSS_URL = "https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css";

  // Helper to load a CSS file
  function loadCSS(url) {
    if (document.querySelector(`link[href="${url}"]`)) return;
    const link = document.createElement("link");
    link.rel = "stylesheet";
    link.href = url;
    document.head.appendChild(link);
  }

  // Helper to load a JS file
  function loadJS(url, callback) {
    if (document.querySelector(`script[src="${url}"]`)) {
      if (callback) callback(); // already loading/loaded
      return;
    }
    const script = document.createElement("script");
    script.src = url;
    script.onload = callback;
    document.head.appendChild(script);
  }

  // Only load if Swiper is not defined
  if (typeof window.Swiper === "undefined") {
    loadCSS(SWIPER_CSS_URL);
    loadJS(SWIPER_JS_URL, () => {
      console.debug("✅ Swiper loaded dynamically");
    });
  } else {
    console.debug("🧠 Swiper already available");
  }
})();
</script>

Install Component-Specific Code

Suppose you have some code that needs to run, but it will only affect the specific component directly.

Place this in an embed inside of the component, just inside of the outermost element.

<script>
(function() {
  // Identify the script element
  const currentScript = document.currentScript;
  if (!currentScript) return;

  // Identify the immediate parent element of the script
  const parentElement = currentScript.parentElement.parentElement;
  if (!parentElement) return;
  
  // Execute your code here, using the parentElement as your component DOM reference 

})();
</script>

‍