如何将完整字符串作为属性传递给Lit Web组件？

问题背景 #

现有一个基础的Lit文本组件，默认样式为红色：

import { LitElement, html } from "lit";
import { customElement } from "lit/decorators.js";

@customElement("bb-text")
export class Text extends LitElement {
  render() {
    return html` <p style="color: red;"><slot></slot></p> `;
  }
}

想要把整个style属性以字符串形式传递到元素上，尝试了两种方法都没成功：

• 使用unsafeHTML：组件直接无法渲染

  return html` <p ${unsafeHTML(getStyle())}><slot></slot></p> `;
  

• 使用自定义指令：完全没有效果

  import { LitElement, html } from "lit";
  import { customElement } from "lit/decorators.js";
  import { Directive, directive } from "lit/directive.js";
  
  class StyleDirective extends Directive {
    render() {
      return 'style="color: red;"';
    }
  }
  const getStyle = directive(StyleDirective);
  
  @customElement("bb-text")
  export class Text extends LitElement {
    render() {
      return html` <p ${getStyle()}><slot></slot></p> `;
    }
  }
  

正确实现方式 #

Lit模板表达式里直接传完整属性字符串不会被解析为属性声明，推荐用以下两种方式实现：

方法1：属性对象展开 #

返回包含style属性的对象，通过...语法直接展开到元素上，这是Lit官方推荐的安全写法：

import { LitElement, html } from "lit";
import { customElement } from "lit/decorators.js";

function getStyle() {
  return { style: "color: red;" };
}

@customElement("bb-text")
export class Text extends LitElement {
  render() {
    return html` <p ...${getStyle()}><slot></slot></p> `;
  }
}

方法2：修正自定义指令逻辑 #

自定义指令不能只返回字符串，需要直接操作元素的属性。修改指令代码，直接给目标元素设置style：

import { LitElement, html } from "lit";
import { customElement } from "lit/decorators.js";
import { Directive, directive } from "lit/directive.js";

class StyleDirective extends Directive {
  update(part) {
    // 直接操作元素的style属性
    part.element.style.cssText = "color: red;";
    return this.render();
  }
  render() {
    return '';
  }
}
const getStyle = directive(StyleDirective);

@customElement("bb-text")
export class Text extends LitElement {
  render() {
    return html` <p ${getStyle()}><slot></slot></p> `;
  }
}

如果需要动态传递样式字符串，还可以给指令加参数：

class StyleDirective extends Directive {
  update(part, [styleStr]) {
    part.element.style.cssText = styleStr;
    return this.render(styleStr);
  }
  render(styleStr) {
    return '';
  }
}
const getStyle = directive(StyleDirective);

// 使用时传递动态样式
return html` <p ${getStyle('color: red; font-size: 16px;')}><slot></slot></p> `;

为什么之前的方法失败 #

• unsafeHTML仅用于解析元素内部的HTML内容，不能用来处理元素属性声明，所以会导致组件渲染异常。
• 最初的自定义指令只是返回字符串，Lit不会将这个字符串解析为属性，而是会当作无效内容忽略，因此没有任何效果。

内容的提问来源于stack exchange，提问作者Sam Scolari