Everyone has their favorite tools, languages and JavaScript frameworks. JavaScript frameworks allow you to create components. Which you can reuse throughout your apps. What if you can’t use a specific framework? You can use Vanilla JavaScript to build web components.
Photo by Pixabay from Pexels
What are web components?
Web components are a set of web technologies that allow you to create custom reusable HTML elements. These elements are not dependent on using a specific framework. You can use them without having to load a framework like React or Angular.
To build a web component, you can use these three technologies:
- Custom Elements: A JavaScript API that allows you to create custom elements which you can use like HTML tags.
- Shadow DOM: The Shadow DOM API provides a way to attach a hidden and separate Document Object Model to a web component. This keeps your component’s HTML, CSS and JavaScript separate from the rest of the web page.
- HTML Templates: Use HTML tags
<template>and<slot>to hold HTML that doesn’t display when the page loads. You load it with JavaScript at a later time.
Can I use web components in a JavaScript framework?
Yes. You can use your component in whatever JavaScript framework you want or none at all. If you need to switch to a new framework, you don’t have to rewrite your web component. Learn how to get started with building a web components.
Want to create your own components?
Check out these tools and resources for building your own web components.
- Building Web Components: A guide for build modern web components.
- Open Web Components: You’ll find guides, tools and libraries.
- Stencil: A toolchain for building reusable, fast, standard-based web components.
- Slim.js: A fast, JavaScript library for building web components.
Want to learn more?
You can learn more from the Web Components Community and Web Components.