Polymer 2, change CSS in custom element from parent - css

Question

So lets say I have a custom element
<template>
<style include="stylesheet"></style>
<div class="main">
stufff
<other-custom-element></other-custom-element>
</div>
</template>
and "other-custom-element" is
<template>
<style include="stylesheet"></style>
<div class="main">
stufff
</div>
</template>
and "stylesheet" is
.main {
padding: 10rem;
}
How to I make it so the padding from "other-custom-element" will not show up on the custom element without removing the padding from that element? Just want the padding gone while I'm on the parent page.
So far I've tried:
other-custom-element .main{
padding: 0;
}
and giving the "other-custom-element" a class and trying that:
.other-custom-element-className .main {
padding: 0;
}
I'm not terribly good at Polymer and I did not make this website, I'm merely the CSS guy making it look good. I figured it wouldn't hurt to ask here while I continue to try to solve this in case someone figured it out sooner or already knew. If I find the solution before someone can answer I'll be sure to share.

Answer 1

Try removing the other-custom-element and .other-custom-element-className these break it. The thing is Polymer uses ShadowRoot which does not allow css to change it´s children. So every Polymer Element needs its own css file which is always relativ to the Element itself. You will find the Documentation here.

Answer 2

The short answer is as far as I know, you cannot change child element parameters from a parent element, at least not the way I was doing it that's for sure. This is what I found out and my solution that worked.
So I'll add some dimension to the problem so you can understand my solution and why I did it.
<other-custom-element> was a page, and the element it was on was also a page. Both were pages, so both needed the margins and such and I could not remove those. The solution is using polymer the way it was meant to be used (in my opinion): making a page of elements.
One way to do polymer, is to have a page FULL of interchangeable elements. That way if you want to use them again you can.
What this means is making <other-custom-element> look something like this:
<template>
<style include="stylesheet"></style>
<style> /*custom css*/ </style>
<div class="main">
<other-page-element1></other-page-element1>
</div>
<div class="main">
<other-page-element2></other-page-element2>
</div>
<div class="main">
<other-page-element3></other-page-element3>
</div>
</template>
instead of this:
<template>
<style include="stylesheet"></style>
<style> /*custom css*/ </style>
<div class="main">
stuff
</div>
</template>
What this allows me to do now is with the new page I can simply pull the elements (whether it be some or all) from the <other-custom-element> page like so.
<template>
<style include="stylesheet"></style>
<style> /*custom css*/ </style>
<div class="main">
<this-page-element>
</div>
<div class="main">
<other-page-element2>
</div>
</template>
This was the correct way to deal with this instead of trying to do some css selector (also that wouldn't work anyways).
Hope my answer helps anyone else who runs into css issues with polymer!