未应用铁覆盖背景样式

Question

我有一个自定义元素，它有一个铁覆盖背景作为子元素（在纸质对话框内）。我正在尝试增加淡入淡出时间（如果我可以在 chrome 中编辑 css，我可以这样做）。当我尝试将更改应用于样式 --iron-overlay-backdrop 时，这些更改并未应用于子项。我所拥有的是：

<style>
:host {
    --iron-overlay-backdrop: {transition: opacity 5s;};
}
</style>

我还尝试了一些更简单的方法 --iron-overlay-backdrop-opacity: 0.8 也不起作用。由于某种原因，未应用该样式。有谁知道我做错了什么，或者我如何才能获得更长过渡时间的预期行为？

Answer 1

叠加背景的自定义属性是：--iron-overlay-backdrop-opacity 您可以设置主机的不透明度，并以这种方式过渡

:host{
opacity: var(--iron-overlay-backdrop-opacity, 0.8);
  transition: opacity 5s;
}