Do CSS resets like normalize.css propagate to the shadow dom?

Question

Do CSS resets like normalize.css propagate to the shadow dom? So for example if normalize.css is used in a Polymer application/project, will all the element throughout the dom and shadow dom have the normalize.css resets applied?

TIA, Ole

The main problem with that will be `css` file. Polymer has deprecated usage of external css files in its elements and normalize is an external css file — a1626, Aug 05 '16 at 08:26
There is a tool to create a style module from external styles. — Günter Zöchbauer, Aug 05 '16 at 13:34
Not exactly a tool but a web-service [Polystyles](https://github.com/PolymerLabs/polystyles) from PolymerLabs — a1626, Aug 05 '16 at 17:52

score 2 · Answer 1 · answered Aug 30 '16 at 16:52

Short answer is no.

You can use all: initial; to reset all your styles inside the component.

"...rules in the parent page have higher specificity than :host,... this allows users to override your top-level styling from the outside."

So if you set styles on your :root or html will get into the shadowDOM

Supersharp · Accepted Answer · 2016-08-23T10:37:40.657

1

No (unless they are inherited by default).

Because the Shadow DOM isolates the CSS styles from the one of the main document, nothing defined in normalize.css will be taken in account in your Shadow DOM.

edited Aug 23 '16 at 10:37

answered Aug 05 '16 at 13:31

Supersharp

29,002
9
92
134

... except when you add it to your components style – Günter Zöchbauer Aug 05 '16 at 13:33
According to @ebidel CSS properties that inherit continue to inherit inside the shadow dom. Supersharp do you want to update the answer? – Ole Aug 22 '16 at 19:36

Do CSS resets like normalize.css propagate to the shadow dom?

2 Answers2