litElement 在 static 样式中使用 class 变量

Question

我需要在我的 litElement class 中计算相同的弹出框 position。 接下来将其用作样式值。 例如。：

export const defaultProps = {
  wrapperTop: 0,
}

export class Popover extends ScopedElementsMixin(LitElement) {

  ...
  static get properties() {
    return {
      wrapperTop: { type: String || Number, reflect: true},
    }
  }

  ...

 constructor() {
   super();

   this.wrapperTop = this.defaultProps.wrapperTop
 }

static get styles() {
  return css`
  .popover-wrapper {
     top: ${this.wrapperTop} //this.wrapperTop is undefined
   }`
 }

 calculateY () {
  //calculate Y depend on some element position
 }

 update() {
  calculateY()
 }

 ...
 
 return html`<div class="popoverWrapper"> ... </div>`
}

而且我找不到使用 this.wrapperTop 获取 static styles 的方法。 它是未定义的。 有一些方法可以做到这一点，或者我必须在渲染中使用 style=""？

Answer 1

将unsafeCSS添加到您的导入中：

import { html, css, LitElement, unsafeCSS } from 'lit-element';

使用

static get styles() {
  return css`
  .popover-wrapper {
     top: ${unsafeCSS(this.wrapperTop)} //this.wrapperTop is undefined
   }`
}