Skip to content

Latest commit

 

History

History
129 lines (96 loc) · 2.92 KB

README.md

File metadata and controls

129 lines (96 loc) · 2.92 KB
Raw

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-components

Add Web Components to your Astro configuration.

import { webcomponents } from '@astropub/web-components'

/** @type {import('astro').AstroUserConfig} */
const config = {
  vite: {
    plugins: [
      webcomponents()
    ]
  }
}

export default config

Enjoy!

Open in StackBlitz

Project Structure

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.

Commands

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.