Hi all, I would like to know if it is possible to import a web-components library created in lit for example: Spectrum or shoelace, the idea of using these libraries is to take advantage of the integration of astrojs with lit that according to the documentation uses @lit-labs/ssr and in this way take advantage of the SSR of astrojs.
** P.S.**: in advance thank you very much
#How to use web-components libraries with @astrojs/lit
cinder timber
still holly
@lilac adder I know you worked on this a bit long ago
https://github.com/matthewp/astro-lit-demo
Can we SSR shoelace with astro's lit integration?
lilac adder
I believe it did work at the time, but that was quite a long time ago. The best thing to do create a project like the Lit example: https://github.com/withastro/astro/tree/main/examples/framework-lit and see what happens 🙂
cinder timber
hello, I have reviewed the examples here is my structure
`// src/components/lit-web-components/sl-button.js
import '@shoelace-style/shoelace/dist/components/button/button.js';
export const tagName = 'sl-button';`
Then in my BaseLayout.astro component
// src/layouts/BaseLayout.astro import "../components/lit-web-components/sl-button.js";
Import generates MutationObserver error
15:19:41 [ERROR] MutationObserver not defined
The error takes me to this path
// node_modules/@shoelace-style/localize/dist/index.js
And well it would be exactly this part
const elementsconnected = new Set(); const documentElementObserver = new MutationObserver(update); const translations = new Map();
P.S: The same error is generated for Spectrum web-components
kindred echo
Not sure this is what you're looking for, but I just included a CDN script link in my layout for Shoelace to get mine working. I also added these to tsconfig.json: "experimentalDecorators": true, and "useDefineForClassFields": false. Aside from that, I also needed to include Babel. My .babel.config.json file is { "plugins": [["@babel/plugin-proposal-decorators", { "decoratorsBeforeExport": true }]] } and this required bun add @babel/plugin-proposal-decorators. I'm not sure why I have @webcomponents/template-shadowroot in my package.json, but maybe that was needed too...
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.15.0/cdn/themes/dark.css" />
<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.15.0/cdn/shoelace.js" ></script>```Hello, thank you for responding. I was referring to rendering a Lit web component with SSR approach from Astro, since the integration of @astro/lit includes @lit-labs/ssr. Therefore, I thought that by having this integration and then importing an element from the shoelace/spectrum library, I could render it. Am I correct in understanding that the approach you propose would be client-side, right?
https://docs.astro.build/en/guides/client-side-scripts/#client-side-scripts
Or am I very mistaken? I'm sorry, I don't have much experience with Astro.
@webcomponents/template-shadowroot Regarding this library, I would believe that it allows rendering a web-component with shadow DOM on the server side following the approach of DSD (Declarative Shadow DOM).