polymer - 如何使用 mixin 为包含在 LitElement 自定义组件中的纸卡 (Polymer 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;
      }
    }`

我还导入了 mixin polyfill 但什么也没有

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

我需要帮助 谢谢

标签： polymerpolymer-3.xlit-element

Answer 1

要使用 CSS 混合：

1. 将Shady CSS ApplyShim导入index.html：

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

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

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

演示