Essential Web Components

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 logo 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 logo Svelte

<script lang="ts">
	import './counter-button';
<script>

<main>
	<counter-button></counter-button>
</main>

Vue logo Vue

<script setup lang="ts">
import './counter-button';
<script>

<template>
	<main>
		<counter-button></counter-button>
	</main>
</template>

React logo React (beta)

import React from "react";
import './counter-button';
	
export default function App() {
	return (
		<main>
			<counter-button></counter-button>
		</main>
	);
}

Markdown logo Markdown

# No MDX Needed!
	
Web components can be used right inside
markdown files.

<counter-button></counter-button>

Astro logo Astro

<main>
	<counter-button></counter-button>
</main>

<script src="./counter-button.js"></script>

Preact logo Preact

import './counter-button';
	
export default function App() {
	return (
		<main>
			<counter-button></counter-button>
		</main>
	);
}

Solid logo 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

YouTube