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.

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.