3

我使用 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;`

我需要帮助 谢谢

4

2 回答 2

0

要使用 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>
      `
  }
}

演示

于 2019-02-02T20:36:22.657 回答
0

Polymer 使用了 CSS mixin，但不适用于 Lit 采用的样式表。您可以将 a 添加<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;
}`
于 2021-04-30T15:42:00.323 回答