Vanilla Web Components

Vanilla Web Components are custom elements that are built using vanilla JavaScript. They are not dependent on any framework and can be used in any web application. In this section you can find tutorials on how to create custom elements using vanilla JavaScript.

Table of contents

• Project Setup - How to setup a new project to create custom elements using vanilla JavaScript.
• Hello World - Create a simple custom element that displays “Hello World”.
• Hello Attribute - Create a simple custom element that displays a message that contains the value of an attribute.
• Hello ShadowDOM - Use the Shadow DOM to encapsulate the styles of a custom element.
• Lifecycle Callbacks - Understand the lifecycle callbacks of a custom element.

To exercise your knowledge, you can try the challenges in the Challenges section.

---

Home | Vanilla Web Components | Project Setup