DEV Community

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

Shadow DOM, Custom Elements and Web Components Explained

mukherjee96 profile image Aritra Mukherjee Originally published at on ・1 min read

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.

Discussion (0)

Forem Open with the Forem app