Polymer 如何使用mixin设置LitElement自定义组件中包含的纸卡（聚合物3）的样式

我在Polymer 3中使用LitElement创建了一个自定义元素。我在自定义元素中包含了一个纸卡元素。我想使用已经定义的样式混合来设置纸卡的样式，但我不能。例如，

纸卡

定义此混音：

--paper-card-header-text

我尝试了几乎所有的方法在我的自定义元素中使用mixin，但是没有成功。例如：

`paper-card{
      --paper-card-header-text:{
         color: blue;
      }
    }`

我还进口了mixin polyfill，但什么也没有

`import @webcomponents/shadycss/entrypoints/apply-shim.js;`

我需要帮助，感谢使用CSS mixin:

在

index.html

中导入：

<script src="./node_modules/@webcomponents/shadycss/apply-shim.min.js"></script>

---

聚合物使用CSS混入，但不适用于Lit采用的样式表。您可以将

添加到模板中，然后对其运行“应用样式”脚本，但这很笨重，可能会导致在更改之前出现未设置样式的DOM

使用legacy Polymer的更好方法是，mixin CSS变量映射到您可以引用的实际原生CSS变量

因此，不是：

css`
纸卡{
--纸卡标题文本：{
颜色：蓝色；
}
}`

调用mixin的基础属性：

css`
纸卡{
--纸卡头文字颜色：蓝色；
}`

但是，在标题颜色的特定情况下，

也是一个直接变量：

css`
纸卡{
--纸卡头颜色：蓝色；
}`

我不知道为什么，但是相反，您可以使用

纸卡{--paper card header color:blue；}更改标题文本的颜色

谢谢，但我的问题更多的是如何使用样式mixin，因为纸卡标题颜色不是mixin

class MyElement extends LitElement {
  render() {
    return html`
      <style>
        paper-card {
          --paper-card-header-text: {
            color: blue;
          };
        }
      </style>
      <paper-card>...</paper-card>
      `
  }
}