DEV Community

Cover image for Shadow DOM, Custom Elements and Web Components Explained
Aritra Mukherjee
Aritra Mukherjee

Posted on • Originally published at geekyminds.co.in on

Shadow DOM, Custom Elements and Web Components Explained

Web Components are a relatively new set of technologies that lets you create custom HTML elements using the shadow DOM. They enable you to write markup, styles and logic once and reuse it around your website or web app!

I'm a strong believer in Project-Based Learning (PBL), so we are also going to write a custom element from scratch!

We will be looking at:

  • The Document Object Model (DOM) ✌
  • The concept of Shadow DOM - simplest explanation πŸ¦„
  • Associated terms (shadow host, tree and root) 🐈
  • Custom Elements, Autonomous Custom Elements and Customized Built-in Elements πŸ•
  • Project - Create a Custom Element from Scratch! πŸŽ‰

Continue reading "Shadow DOM and Custom Elements Explained"

The post Shadow DOM and Custom Elements Explained appeared first on GeekyMinds.

Top comments (0)