ComponentLab style overrides own styles

[manuelhuber]

My components look different inside the component lab compared to the actual app. That's because there're some styles inside the component lab that apply to my components.

Here's what it looks like in the component lab. The highlighted style entry on the right is from ComponentLab.

That's what it's supposed to look like (I deleted the component lab style entry in the header)

[PatrickStephansen]

I'm having the same problem. The component lab styles completely remove any margins and padding that the browser usually defaults. They also stop lists and block quotes from rendering properly. Basically every element is reduced to behaving like a div.

Removing the component lab style tag only seems to slightly affect spacing in the generated navigation menu. These styles should be specific to component lab classes. They shouldn't second-guess the browser's default rendering in my opinion.

[PatrickStephansen]

Looking at the source, removing the encapsulation: ViewEncapsulation.None line from src/frontend/containers/app.ts should namespace the styles and solve the issue.

[PatrickStephansen]

I've made a PR with a quick fix. It does have some side effects on the menu styling, but it's good enough for my purposes.