Question

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

--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;`

我需要帮助谢谢

Answer 1

要使用CSS混合：

导入Shady CSS ApplyShim在index.html：

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

在自定义元素的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>
      `
  }
}

demo

Answer 2

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

使用旧版 Polymer 的更好方法是将 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;
}`

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

2 个答案: