javascript - litelement - 如何根据属性或属性值计算样式

Question

我正在遵循 LitElement 指南 here但似乎无法根据它的属性计算我的自定义元素的样式值。

我希望我的元素以下列方式之一编写:

<my-element data="some values" darkmode></my-element>
<my-element data="some values"></my-element>

我想根据是否设置了 dardmode 属性来设置元素的背景和文本颜色的样式。

在我的 LitElement 类中，我创建了一个相应的属性并对其进行了初始化。但是，在静态样式中，this.darkMode 始终返回 false。我想我在这里遗漏了一些东西但不确定是什么:

class MyElement extends LitElement {

    static get properties() {
        return {
            data:    { type: String },
            darkMode:   { type: Boolean }
        };
    }

    static get styles() {
        const background_color = this.darkMode ? css`#000` : css`#fff` ;
        const text_color = this.darkMode ? css`#fff` : css`#333333`;

        return [
            css`
            :host {
                display: block;
            }
            .data-container {
                font-family: "Roboto",-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
                text-rendering: optimizeLegibility;
                background-color: ${background_color} !important;
                color: ${text_color} !important;
            }`
       ];

    constructor() {
        super();
        this.data = "";
        this.darkMode = false;
    }

    render() {
        return html`
           <div class="data-container">
               <p>${this.data}</p>
           </div>
        `;
    }
}

customElements.define('my-element', MyElement);

Answer 1

在这段代码中:

static get styles() {
  const background_color = this.darkMode ? css`#000` : css`#fff` ;
  // ...

… styles是一个静态方法，所以在里面 this指的是 MyElement 类本身，所以 this.darkMode是darkMode MyElement 的属性而不是 darkMode MyElement 的任何实例的属性。当然，MyElement.darkMode总是 undefined , 所以你总是得到“轻”的风格。

另一种更易于维护的方法是“反射(reflect)”darkMode属性为具有 reflect: true 的元素的属性选项，然后使用 CSS 属性选择器 [dark-mode]覆盖“轻”样式，例如:

.data-container {
  background-color: #fff;
  color: #333;
}
:host([dark-mode]) .data-container {
  background-color: #000;
  color: #fff;
}

您可以在下面的代码片段中看到它的工作原理:

const { LitElement, css, html } = litElement;

class MyElement extends LitElement {
  static get properties() {
    return {
      data: { type: String },
      darkMode: {
        type: Boolean,
        reflect: true,
        attribute: 'dark-mode',
      },
    };
  }

  static get styles() {
    return css `
      :host {
        display: block;
      }
      .data-container {
        background-color: #fff;
        color: #333;
      }
      :host([dark-mode]) .data-container {
        background-color: #000;
        color: #fff;
      }
    `;
  }

  constructor() {
    super();
    this.data = "";
    this.darkMode = false;
  }

  render() {
    return html `
      <div class="data-container">
        <p>${this.data}</p>
      </div>
    `;
  }
}

customElements.define('my-element', MyElement);

<script src="https://bundle.run/lit-element@2.2.1"></script>

<my-element data="some dark values" dark-mode></my-element>
<my-element data="some light values"></my-element>