如何更改聚合物元素样式

Question

创建一个自定义聚合物元素“自动完成”，其中包括现有的聚合物元素“纸张自动完成”。“纸张自动完成”元素类具有特定样式的“纸张输入”元素。如何在“自动完成”元素类（称为“自动完成纸”）中更改“纸张输入”元素样式？

Answer 1

paper-input元素使用paper-input-container，因此您可以按预期/允许的方式定义一组CSS variables对其进行样式设置。

如果您检查paper-input-container here的来源，并在“ ###样式”下查看，您将看到从“外部”样式化元素所需的所有选项。

Answer 2

在自动完成纸张元素中添加以下内容：

  paper-input {
    @apply --my-styles;
  }

在合并纸张自动完成功能的父元素中添加：

paper-autocomplete {
  --my-styles: {
    background-color: green;
    border-radius: 4px;
    border: 1px solid gray;
  };
}