Shoelace integration

[RayyanNafees]

Is your feature request related to a problem? Please describe.
yes, Using external web-component library like Shoelace
& how to implement your own Lit.js components instead of making from vanilla js

Describe the solution you'd like
Adding docs support & examples for shoelace like u added for tailwind

Describe alternatives you've considered
none

[aralroca]

@RayyanNafees, do you mean adding examples for use with the Brisa CLI? We can do it, sure. Of course, any PR to add examples will be very welcome, feel free to add examples.

About documentation, here is the documentation on how to add external WC:

• https://brisa.build/building-your-application/components-details/external-libraries#web-components-dependencies

And this how to compile WC from Brisa WC to use it in other frameworks or vanillajs:

• https://brisa.build/building-your-application/building/web-component-compiler

[RayyanNafees]

No Actually integrating shoelace is quite complex thing to be done in frameworks, their Astro Integration also doesn't even function well despite being part of the official docs

The only way to use it is by Astrolace integration that does pretty decent job for it to be used with Astro

I would appreciate if the dev team does a test if it can be supported and hydrated over SSR with an example

[aralroca]

Ok, can be a great integration to have then. Thanks for the proposal

[aralroca]

I see that adding them in the _integrations file already makes that you can consume them in any page, server component or web component and you get the type-safe of them.

There are things to fix:

• There is a warning in the terminal that should not come up.
• It does not support SSR. I don't know if you can integrate the SSR of your Web Components.
• It does not add the types of attributes.
• Make it easier to add the Web Components to the _integrations file. The good thing about this file is that you can add all of them without any problem, and then you only import the ones you use during the build of Brisa.

Example Code

import type { WebComponentIntegrations } from "brisa";

import "@shoelace-style/shoelace/dist/themes/light.css";

export default {
  "sl-button": "@shoelace-style/shoelace/dist/components/button/button.js",
} satisfies WebComponentIntegrations;

Result

However, using Shoelance right now in Brisa is possible.