Question

static get styles() {
    const width = window.innerWidth
    const height = window.innerHeight
    return css`
        :host{
            display: block;
        }
        .my-img{
            max-width: ${width}px;
            max-height: ${height}px;
        }
    `
}

我在一个Web组件中编写了此CSS，它可以工作。

但是，当浏览器窗口调整大小时，CSS无法自动更改。

如何在调整窗口大小后强制其重新计算？

Answer 1

您可以使用expressions in styles，但有一些警告。

静态样式适用于元素的所有实例。 CSS中的所有表达式都会被评估并包含一次，然后可在所有实例中重复使用。

unsafeCSS可供使用。

如果要将任何变量或非文字形式注入css字符串，则必须使用unsafeCSS函数包装它。

class MyElement extends LitElement {
  static get styles() {
    const mainWidth = 800;
    const padding = 20;   

    return css`
      :host { 
        width: ${unsafeCSS(mainWidth + padding)}px;
      }
    `;
  } 
}

尽管如此，还是有一个很大的安全警告：

⚠️仅将unsafeCSS标记用于受信任的输入。为了防止基于LitElement的组件评估潜在的恶意代码，css标记仅接受文字字符串。不安全的CSS规避了这种保护措施。

如何使CSS动态？

1 个答案: