Web Components
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>Usage
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!