How do Web Components and the Shadow DOM prevent leaky CSS across components?

Question

In 2008 our team investigated GWT - a technology for writing web components for Javascript in Java which would compile down.

A new member of the team said:

You will have a problem with the CSS of the component and the page clashing with each other.

It turned out he was correct.

I was having a conversation with a friend today about Web Components. I asked him how you stop the CSS of the page and the components clashing with each other.

He said:

With Web Components and the Shadow DOM it is all under control. It solves the problem of leaky CSS.

My question is: How do Web Components and the Shadow DOM prevent leaky CSS across components?

have you read documentation on this topic? Good starter is: https://www.dannymoerkerke.com/blog/web-components-will-replace-your-frontend-framework — Danny '365CSI' Engelman, May 09 '19 at 12:34
may I ask you if question is really about "Why"(what was intention) instead of "How"(how does it do that)? — skyboyer, May 09 '19 at 12:37

score 1 · Answer 1 · edited Jun 20 '20 at 09:12

Because Shadow DOM was designed precisely to solve problems met when developping Web Components, as stated by Google in the introduction to Shadow DOM:

Isolated DOM: A component's DOM is self-contained (e.g. document.querySelector() won't return nodes in the component's shadow DOM).

Scoped CSS: CSS defined inside shadow DOM is scoped to it. Style rules don't leak out and page styles don't bleed in.

Simplifies CSS - Scoped DOM means you can use simple CSS selectors, more generic id/class names, and not worry about naming conflicts.

It is achieved by CSS Scoping with the introduction of a new, separate DOM tree called the Shadow DOM, that will locally replace the initial DOM called the Light DOM.

How do Web Components and the Shadow DOM prevent leaky CSS across components?

1 Answers1