Nice way to consume a Lit library?

[rocky gull]

import '@skyra/discord-components-core';
import { LitElement, html } from 'lit';

export class DiscordComponentsWrapper extends LitElement {
  public override render() {
    return html`<slot></slot>`;
  }
}

customElements.define("discord-components-wrapper", DiscordComponentsWrapper);
```Is it possible to get something like this to work so I can directly use an external Lit component library? It seems a bit sad to have to compose components before using them

[rocky gull]

<@&1129102257422610512> In case anyone has experience with Lit 😅

[signal fable]

Hi Daniell, just a quick heads up that we don't encourage pinging 30+ people when you've asked a question! 😅 This role is mostly for the active users in our support squad to coordinate: to ping each other when they need to call in reinforcements in a thread, or alert each other to a thread that needs attention.

I'm sorry it's been a few hours and no one has responded yet! This is a volunteer community of people who try to help as they are available, and sometimes it takes a while. Thank you for your patience and understanding!

[rocky gull]

Ah my bad then, I was told to ping this one if it's been a while

[granite sleet]

What exactly are you looking for sorry?

What would be the ideal code you’d want or how would it look if you could directly use external components

[rocky gull]

Well ideally I’d just use the lit components directly inside my MDX

But since that doesn’t seem to be possible (unless I missed it), I’d be happy to have the shortest path to consume them instead of composing them in a lit component before using in a template like this example I used: https://github.com/skyra-project/discord-components-implementations/blob/main/templates/astro/src/lit/components/DiscordComponentsWrapper.ts

I figured I’d try and use a slot like in the first example of mine, but then the child components slot’s clashes causing odd styling, even if I give the slot a random name

–––
–––

<discord-messages>…
```Would be the most ideal (directly using the lit components)

[granite sleet]

ah I see and you’d just ideally import the assets that “hydrates” that custom element

seems possible to me although I guess it depends on the component library I’m not very familiar with them / lit but it should be just some .js file thst you include on your page that looks for thst element right ?

[rocky gull]

I’m not too sure how Lit works in general so the whole Astro + MDX wrapper only adds to the confusion 😅

[marsh atlas]

Atleast for Shoelace.style (also made with lit) the easy option would be to wrap your lit component inside of an Astro Component. i did this for Astrolace

an example of Shoelace's Alert component remapped into a .astro component https://github.com/MatthiesenXYZ/Astrolace/blob/main/package/src/components/Alert.astro

[rocky gull]

I was hoping to avoid that but I guess I’ll have to live with it 😅 ty

[granite sleet]

Yeah it makes it cleaner imo

But you could do that stuff if you wanted to in mdx

[marsh atlas]

I mean normally with MDX you should be able to just add the import statement at the top under the frontmatter to import your component .js for your use that may still work, i will note, Shoelace.style is a bit of an advanced use-case and due to 90% of the extra stuff they do i was forced to do this since they DO NOT SUPPORT SERVER RENDERING.

If your components are server capible they should work fine being server rendered

[granite sleet]

But the singular import of the Astro component and wrapping it imo is really nice DX

[marsh atlas]

so for MDX it would look something like this...

---
title: some random page
---

import { my-web-component } from "../components/lit/mywebcomponent.js";

<my-web-component>
   content here
</my-web-component>

as long as you have setup the astrojs/lit integration that should work.... (it requires a server rendering shim, so i didnt go this method since it would break shoelace)

[rocky gull]

Ah thanks, I’ll have a look at the structure