如何使用混合剂设计包含在 LitElement 自定义组件中的纸卡(聚合物 3)样式

Question

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

--paper-card-header-text

https://www.webcomponents.org/element/@polymer/paper-card/elements/paper-card

我尝试了几乎所有方法在我的自定义元素中使用该 mixin，但不起作用。例如：

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

我也导入了混合填充物，但没有导入

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

我需要帮助谢谢

Answer 1

要使用 CSS mixin：

1. 在index.html中导入可疑的 CSS 应用填充码：

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

2. 在自定义元素的render()中，在<style>块中插入 CSS mixin：

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

演示

Answer 2

CSS mixins 被 Polymer 使用，但不适用于 Lit 采用的样式表。您可以向模板添加<style>，然后对其运行应用样式脚本，但这很笨拙，可能会导致在更改之前闪烁无样式的 DOM。

使用传统聚合物的一个更好方法是将mixin CSS变量映射到您可以引用的实际本机CSS变量。

因此，而不是：

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

调用 mixin 的基础属性：

css`
paper-card {
  --paper-card-header-text_-_color: blue;
}`

但是，在标题颜色的特定情况下，<paper-card>也是一个直接变量：

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