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

3 2

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.

Image of Docusign

Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

Top comments (0)

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

πŸ‘‹ Kindness is contagious

Please leave a ❀️ or a friendly comment on this post if you found it helpful!

Okay