Normally, when you build a website, you use standard HTML tags like <div>, <button>, <img>.
With Web Components, you can create your own custom HTML tags — for example:

<web-component></web-component>

You decide:

• How it looks
• How it behaves
• What’s inside it

And you can reuse it anywhere in your project (or even in other projects) just like any other HTML tag.

What is Shadow DOM?

The Shadow DOM is like a private room for your component.

Inside this private space:

• Your component’s styles stay inside and don’t leak out.
• Outside styles can’t sneak in and change your component.

It’s a way to protect and isolate your component’s design and behavior.