Is there a way to customise the tag prefix?

[andyjessop]

We want to integrate Shoelace, but I'm wary of adding sl- all over the code base, in JS and in CSS. The main reason is that Shoelace doesn't provide everything that we need, so we will have many "custom" custom elements too, and we would clearly much prefer to have a single way to consume them across the code base.

[claviska]

We don’t support this at the moment. There are too many CSS selectors, querySelectors, and other direct references that would cause things to break. The idea has been floated and we may support it at some point, but I wouldn’t recommend it today.

[andyjessop]

Got it, thanks very much for the quick response.

[mariohamann]

Hey there!

I see two ways:

Renaming

Make your own package, which:

1. downloads Shoelace's tar from NPM
2. makes some Regexing through the whole package, replacing the Shoelace branding
3. republishes it to NPM. This could be an example script for the replacement:

const libraryPrefix = 'cus';
const libraryName = 'custom';

  (path, content) => {
    const capitalizedPrefix = `${libraryPrefix.charAt(0).toUpperCase()}${libraryPrefix.slice(1)}`;
    const capitalizedLibraryName = `${libraryName.charAt(0).toUpperCase()}${libraryName.slice(1)}`;
    const lowerLibraryName = libraryName.toLowerCase();
    const libraryDesignName = `${lowerLibraryName}-design-system`;

    const regexPattern = new RegExp(`@${libraryDesignName}/(?!${lowerLibraryName}$)`, 'g');

    const replace = c => c
      .replace(/Sl(?=[A-Z])/g, capitalizedPrefix)
      .replace(/(?<![A-Za-z])sl-/g, `${libraryPrefix}-`)
      .replace(/shoelace-style/g, libraryDesignName)
      .replace(/Shoelace/g, capitalizedLibraryName)
      .replace(/shoelace/g, lowerLibraryName)
      .replace('__SHOELACE_VERSION__', '__PACKAGE_VERSION__')
      .replace(regexPattern, '@shoelace-style/');

I think this could be even automized and wouldn't be that much effort to be honest.

Customizing

I'm working on a Design System called Synergy. There we had this need, too, plus the need to e. g. rename or remove some properties, change default styles etc. Instead of forking we decided to implement some "smart forking" via a package called vendorism, which is currently not on NPM but will be soon: https://github.com/mariohamann/vendorism

The process is more or less:

1. We run npm run vendorism whenever we want (e. g. after updates)
2. It downloads the Shoelace repo (not the package!)
3. You decide which files you want (including automatic dependency recognition between components)
4. You can decide for each file how to alter it.

To change the Shoelace branding, we have the following script: https://github.com/synergy-design-system/synergy-design-system/blob/main/packages/components/scripts/vendorism.js#L140-L161

For the button we wanted some changes and did alter the files there as well:
https://github.com/synergy-design-system/synergy-design-system/blob/main/packages/components/scripts/vendorism/custom/button.vendorism.js

In our case this enabled it even to integrate Shoelace into our monorepo, where we only imported some components, add our own ones, made documentation in a different package in the repo and even altered build scripts etc. For the moment we're quite happy with this process, as it allows us to get the full power and updates of Shoelace, while being able to bring in our own changes.

We tested it for some minor versions and it worked pretty well so far. We're aware of the fact, that big changes to Shoelace files will bring lots of changes on our side, too, but this is still easier to handle instead of forking.

---

If you have any questions, jsut reach out! :)