LitElement中ifDefined指令失效 标题始终渲染默认h2问题排查

代码存在4处核心逻辑错误，导致标题层级始终渲染为默认h2：

• Storybook模板属性绑定语法错误
  模板中写的${ifDefined(size)}、${ifDefined(level)}是错误的Lit动态绑定写法，这种无修饰的写法只会把属性当作布尔属性处理：只要值存在就给组件添加值为空字符串的同名属性，根本不会把h1/h3这类实际层级值传入组件，组件初始化时level属性永远是undefined。
• sanitizeLevel方法逻辑完全失效
  1. 方法内部switch判断用的是组件实例的this.level，完全没有使用传入的level形参；
  2. render函数第一次调用this.sanitizeLevel()时没有传任何参数，此时this.level为undefined，直接走default分支把this.level强制改成h2，后续再调用方法传入this.level时，值已经被篡改，永远走不到其他层级分支；
  3. 方法最后返回的是传入的原始形参，第一次无参调用时返回undefined。
• render函数违反Lit设计要求
  Lit的render函数必须是纯函数，不能在render过程中修改this.size、this.level这类响应式属性，否则会触发不必要的重渲染，甚至导致无限渲染循环。
• unsafeStatic使用不规范
  unsafeStatic设计用于标记固定不变的静态可信字符串，原代码把动态变化的层级值直接传入，不仅存在XSS风险，后续动态修改level时Lit不会检测到这部分内容变化，标签名不会同步更新。

组件主文件代码 #

import { LitElement, html } from 'lit';
import { styleMap } from 'lit/directives/style-map.js';
import { unsafeStatic } from 'lit/static-html.js';

export class GdwcHeading extends LitElement {
  static get properties() {
    return {
      /**
       * Heading size
       */
      size: { type: String },
      /**
       * Heading level
       */
      level: { type: String },
    };
  }

  // 抽离纯校验逻辑，不修改实例属性，入参为待校验值，返回合法层级
  #sanitizeLevel(level) {
    const validLevels = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
    return validLevels.includes(level) ? level : 'h2';
  }

  render() {
    // render内仅做值计算，不修改实例属性
    const validLevel = this.#sanitizeLevel(this.level);
    const styles = { fontSize: this.size ? `var(${this.size})` : 'initial' };
    const tag = unsafeStatic(validLevel);
    
    return html`
      <${tag} style=${styleMap(styles)}>
        <slot></slot>
      </${tag}>
    `;
  }
}

customElements.define('gdwc-heading', GdwcHeading);

Storybook测试页代码 #

import { html } from 'lit';
import { ifDefined } from 'lit/directives/if-defined.js';
import { controls, themeControls } from '../stories/fixtures/controls.js';
import '../heading.js';
import '../store.js';
import '../provider.js';
import '../stories/components/gdwc-theme.js';

export default {
  title: 'Elements/Heading',
  component: 'gdwc-heading',
  description: 'A simple heading component',
  parameters: {
    docs: {
      description: {
        component: 'A generic heading',
      },
    },
  },
  argTypes: {
    defaultSlot: {
      table: {
        category: 'slots',
      },
    },
    size: {
      options: controls.sizes.options,
      control: controls.sizes.control,
      description: controls.sizes.description,
      table: {
        category: 'properties',
      },
    },
    level: {
      options: controls.headingLevels.options,
      control: controls.headingLevels.control,
      description: controls.headingLevels.description,
      table: {
        category: 'properties',
      },
    },
    ...themeControls,
  },
};

const Template = args => {
  const { size, defaultSlot, level } = args;
  return html`
    <gdwc-theme args=${JSON.stringify(args)}>
      <!-- 动态属性绑定必须加.前缀，确保实际值能传入组件 -->
      <gdwc-heading .size=${ifDefined(size)} .level=${ifDefined(level)}>
        ${defaultSlot}
      </gdwc-heading>
    </gdwc-theme>
  `;
};

export const Primary = Template.bind({});

Primary.args = {
  defaultSlot: 'My Custom Heading',
};

• 把层级校验逻辑改成纯函数，用数组判断替代冗余的switch分支，只做值校验返回结果，不在方法内修改组件实例属性；
• 移除render函数中所有修改响应式属性的逻辑，所有样式、标签名都基于当前属性值计算生成，避免触发额外重渲染；
• 修正Storybook模板的属性绑定语法，给动态属性添加.前缀，确保ifDefined处理后的值能正确传入组件；
• 修正组件注册、Storybook组件名配置的遗漏问题，确保组件能正常识别渲染。

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