Web components are a group of native browser technologies, mainly custom elements, shadow DOM and HTML templates, that let developers define their own reusable tags such as <user-card> with their own encapsulated structure and styling.
Why it matters
They work in any framework or none, so a design system can publish one component set for every team. Shadow DOM isolates styles, preventing a page's CSS from breaking the widget and vice versa. Server rendering and form participation need extra care compared with framework components. Browser support for the core standards is now broad, so polyfills are rarely needed for new projects.
Example
class HelloTag extends HTMLElement {
connectedCallback() {
this.attachShadow({ mode: 'open' }).innerHTML = '<p>Hello!</p>';
}
}
customElements.define('hello-tag', HelloTag);Use it in markup as <hello-tag></hello-tag>.
Common mistakes
- Naming a custom element without a hyphen. Names must contain one.
- Expecting global CSS to style content inside a shadow root.
- Assuming they replace frameworks. They solve reuse, not state management and routing.
Related
Get notified when this term updates
Plus occasional practical tips on uptime and monitoring, nothing else. Unsubscribe anytime.
This page is general information written by our editorial team and updated when documentation changes. Servers and providers differ, so test changes safely first. See our editorial policy and disclaimer.