DEV Community 👩‍💻👨‍💻

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

Posted on • Originally published at 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)

🌚 Life is too short to browse without dark mode