polymer - 如何使css动态化？

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

您可以在样式中使用表达式，但有一些注意事项。

静态样式适用于元素的所有实例。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 标记仅接受文字字符串。unsafeCSS 绕过了这个保护措施。