Custom Code in Shared Lib Components

As of 2025-Jul-11 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 Component-Specific Code

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

For example, a timer component, where you have several of these on the page at the same time, each operating independently.

To do that, we'll use a combination of techniques in our embed script;

• We'll encapsulate the code in an immediately invoked function expression ( IIFE ) so that the variables we define here won't pollute the global namespace.
• We'll locate the <script> element for this embed, and from it, we'll locate the component's root element. That defines the elements within the instance we're targeting.

Place this code in an embed inside of the component,

Positioning is important. You want it to be nested only one level deep, so a direct descendant of the root node, so that it can locate the correct parent- however it should be the at the bottom, the very last element within the component to ensure that the browser executes it last, after that instance's elements are in the DOM.

<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>

IMPORTANT: In order for this to work, it's important that any libraries you need to reference are UMD builds rather than ES modules. If you try to add type="module" to this script, the browser defers the load and document.currentScript will return null.

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.

You can place an embed in your component to achieve that. The positioning of the embed doesn't matter as long as it's within your component.

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>

‍