css - Polymer 2，从父级更改自定义元素中的 CSS

Question

假设我有一个自定义元素

<template>
<style include="stylesheet"></style>
<div class="main">
stufff
<other-custom-element></other-custom-element>
</div>
</template>

和“其他自定义元素”是

<template>
<style include="stylesheet"></style>
<div class="main">
stufff
</div>
</template>

和“样式表”是

.main {
  padding: 10rem;
}

如果不从该元素中删除填充，我该如何做到这一点，以便来自“其他自定义元素”的填充不会显示在自定义元素上？当我在父页面上时，只希望填充消失。

到目前为止我已经尝试过:

other-custom-element .main{
  padding: 0;
}

并给“other-custom-element”一个类并尝试:

.other-custom-element-className .main {
  padding: 0;
}

我不是很擅长 Polymer，我也没有制作这个网站，我只是 CSS 专家，让它看起来不错。我认为在我继续尝试解决这个问题的同时在这里提问也没什么坏处，以防有人早点发现或已经知道。如果我在有人回答之前找到解决方案，我一定会分享。

Answer 1

尝试删除 other-custom-element 和 .other-custom-element-className 这些会破坏它。问题是 Polymer 使用 ShadowRoot，它不允许 css 改变它的 child 。所以每个 Polymer 元素都需要自己的 css 文件，它总是与元素本身相关。您会找到文档 here .