DEV Community

Cover image for 🌐 Understanding Shadow DOM and Web Components in JavaScript

🌐 Understanding Shadow DOM and Web Components in JavaScript

Dipak Ahirav on June 21, 2024

The web has evolved significantly over the years, and one of the most exciting advancements is the introduction of Web Components and Shadow DOM. T...
Read full post
Collapse
 
dannyengelman profile image
Danny Engelman • • Edited

With one helper function

const createElement = (t,p) => Object.assign(document.createElement(t), p);
Enter fullscreen mode Exit fullscreen mode

You can make the constructor less verbose, and better extendable.

Also see: Dev.to - Web Components lesson #102 - 5 more lessons after #101

Collapse
 
neurabot profile image
Neurabot •

Nice.

Collapse
 
hemantbhat profile image
Hemant Bhat •

Great explanation

Collapse
 
dipakahirav profile image
Dipak Ahirav •

Thanks

Collapse
 
litlyx profile image
Antonio | CEO at Litlyx.com •

Really great work!

Collapse
 
dipakahirav profile image
Dipak Ahirav •

Thanks

Collapse
 
dipakahirav profile image
Dipak Ahirav •

Thank you @matin_mollapur

Collapse
 
ankit_kumar_41670acf33cf4 profile image
Ankit kumar •

Great work

Collapse
 
dipakahirav profile image
Dipak Ahirav •

Thanks @ankit_kumar_41670acf33cf4 For kind words, please subscribe to my YouTube channel to support my channel and get more web development tutorials. Thank You

Collapse
 
kspshnik profile image
Evgeny Karpel •

What about Can I Use? )

Collapse
 
dannyengelman profile image
Danny Engelman •

Support since 2018 in all modern browsers (when Edge switched to the Chromium engine)
(I would say 6 years, but that will be wrong in 2025, so you need a Web Component here to always display the correct number of years)

caniuse.com/?search=web%20components