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

【问题标题】：Polymer 2, change CSS in custom element from parentPolymer 2，从父级更改自定义元素中的 CSS
【发布时间】：2018-06-04 22:54:33
【问题描述】：

假设我有一个自定义元素

<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-className .main {
  padding: 0;
}

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

【问题讨论】：

标签： css polymer-2.x

【解决方案1】：

尝试删除other-custom-element 和.other-custom-element-className 这会破坏它。问题是 Polymer 使用 ShadowRoot，它不允许 css 更改它的孩子。因此，每个 Polymer Element 都需要自己的 css 文件，该文件始终与 Element 本身相关。您将找到文档here。

【讨论】：

我同意。我将回答我的问题并解释我做了什么。您可能会发现它也是正确的，因为这是您在聚合物中应该采用的方式。

【解决方案2】：

据我所知，简短的回答是，您不能从父元素更改子元素参数，至少不是我这样做的方式，这是肯定的。这是我发现的，也是我的解决方案。

所以我会为问题添加一些维度，以便您了解我的解决方案以及我这样做的原因。

<other-custom-element> 是一个页面，它所在的元素也是一个页面。两者都是页面，所以都需要边距等，我无法删除这些。解决方案是按照预期的方式使用聚合物（在我看来）：制作一页元素。

制作聚合物的一种方法是让一页充满可互换的元素。这样，如果您想再次使用它们，您可以。

这意味着让<other-custom-element> 看起来像这样：

<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>

而不是这个：

<template>
<style include="stylesheet"></style>
<style> /*custom css*/ </style>
<div class="main">
stuff
</div>
</template>

这让我现在可以做的是使用新页面，我可以像这样简单地从 <other-custom-element> 页面中提取元素（无论是部分还是全部）。

<template>
<style include="stylesheet"></style>
<style> /*custom css*/ </style>
<div class="main">
<this-page-element>
</div>
<div class="main">
<other-page-element2>
</div>
</template>

这是处理这个问题的正确方法，而不是尝试做一些 css 选择器（这也不管用）。

希望我的回答能帮助其他遇到聚合物 CSS 问题的人！

【讨论】：