astro-wcc

February 5, 2026 ยท View on GitHub

An Astro integration for SSR Web Components using WCC.

See this demonstration repo for an example of using this plugin.

Usage

  1. Install the plugin into your Astro project 
    $ npm i -D @projectevergreen/astro-wcc
  2. Then add it to your Astro configuration file 
    import { defineConfig } from 'astro/config';
import astroWcc from '@projectevergreen/astro-wcc';

export default defineConfig({
  integrations: [ astroWcc() ]
});
  3. You can now use a component in an Astro file 
    <!-- src/pages/index.astro -->
<html lang="en">
  <head>
    <script src="../components/greeting.js"></script>
  </head>
  <body>
    <x-greeting></x-greeting>
  </body>
</html>

Caveats

  • Currently assumes <x-${tagName}> maps to src/components/${tagName}.js
  • Client hints (e.g. <x-greeting client:visible>) are not supported