Web Components lets you use native Web Components (.web.js) as Astro Components.
components/Button.web.js:
export default class Button extends HTMLElement {
constructor() {
let host = super()
let root = host.attachShadow({ mode: 'open' })
root.innerHTML = `<button><slot></slot></button>`
}
}
customElements.define('h-button', Button)pages/index.astro:
---
import Button from '../components/Button.web.js'
---
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Button Example</title>
</head>
<body>
<h1>Button Example</h1>
<Button>click me</Button>
</body>
</html>Rendered HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Button Example</title>
<script type="module">class o extends HTMLElement{constructor(){let t=super().attachShadow({mode:"open"});t.innerHTML="<button><slot></slot></button>"}}customElements.define("h-button",o)</script>
</head>
<body>
<h1>Button Example</h1>
<h-button>click me</h-button>
</body>
</html>Install Web Components to your project.
npm install @astropub/web-componentsAdd Web Components to your Astro configuration.
import { webcomponents } from '@astropub/web-components'
/** @type {import('astro').AstroUserConfig} */
const config = {
vite: {
plugins: [
webcomponents()
]
}
}
export default configEnjoy!
Inside of the project, you'll see the following folders and files:
/
├── demo/
│ ├── public/
│ └── src/
│ └── pages/
│ └── index.astro
└── packages/
└── web-components/
├── index.js
└── package.json
This project uses workspaces to develop a single package, @atropub/web-components.
It also includes a minimal Astro project, demo, for developing and demonstrating the plugin.
All commands are run from the root of the project, from a terminal:
| Command | Action |
|---|---|
npm install |
Installs dependencies |
npm run start |
Starts local dev server at localhost:3000 |
npm run build |
Build your production site to ./dist/ |
npm run serve |
Preview your build locally, before deploying |
Want to learn more? Read our documentation or jump into our Discord server.