Web Components
The browser native way of building reusable user interfaces
Learn moreUsed by:
Components, without the framework
Web components are a component model built using Web Browser APIs. There's no NPM package to install, no runtime to ship, no compilation to wait for. It's just regular HTML and JavaScript all the way down.
<counter-button>
<button>Clicked <span>0</span> times</button>
</counter-button>
<script>
class CounterButton extends HTMLElement {
constructor() {
super();
this.span = this.querySelector('span');
this.button = this.querySelector('button');
this.button.addEventListener(
'click',
this.increment.bind(this)
);
}
increment() {
const count = parseInt(this.span.textContent);
this.span.textContent = `${count + 1}`;
}
}
customElements.define('counter-button', CounterButton);
</script>
<style>
counter-button > button {
font: inherit;
color: var(--foreground-color);
background: var(--background-color);
padding: 8px 16px;
border-radius: 10px;
}
</style>
Components you can use anywhere
Web components are literally HTML. From the browser's perspective, a
<counter-button>
is just as much an HTML element as a
<div>
. This means you can use web components
just about anywhere that you can
use HTML.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello Web Components!</title>
</head>
<body>
<counter-button></counter-button>
<script src="./counter-button.js"></script>
</body>
</html>
Svelte
<script lang="ts">
import './counter-button';
<script>
<main>
<counter-button></counter-button>
</main>
Vue
<script setup lang="ts">
import './counter-button';
<script>
<template>
<main>
<counter-button></counter-button>
</main>
</template>
React (beta)
import React from "react";
import './counter-button';
export default function App() {
return (
<main>
<counter-button></counter-button>
</main>
);
}
Markdown
# No MDX Needed!
Web components can be used right inside
markdown files.
<counter-button></counter-button>
Astro
<main>
<counter-button></counter-button>
</main>
<script src="./counter-button.js"></script>
Preact
import './counter-button';
export default function App() {
return (
<main>
<counter-button></counter-button>
</main>
);
}
Solid
import './counter-button';
export default function App() {
return (
<main>
<counter-button></counter-button>
</main>
);
}
Components for the ages
From tiny tasks to the largest applications on the internet.. from today, to the future, and beyond.. web components are a component model to last for the ages.
Learn more