WebComponent开发：如何为传入日期匹配的日历元素添加active类

你当前的代码无法运行通常是以下几个原因导致的：

1. 没有将day属性声明为自定义元素的观察属性，无法正确同步HTML上的属性值到组件内部变量
2. selectDay的调用时机早于DOM渲染完成，根节点中还没有生成对应的日期li元素，getElementById返回null触发报错
3. 没有做边界判断，传入非法day值时操作空对象导致逻辑中断

调整后的完整实现（原生Web Components版本） #

class CalendarSheet extends HTMLElement {
  // 声明需要监听的属性
  static get observedAttributes() {
    return ['day'];
  }

  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this._day = 1; // 内部存储day的变量
  }

  // 属性变化时同步更新并触发重渲染
  attributeChangedCallback(name, oldVal, newVal) {
    if (name === 'day' && oldVal !== newVal) {
      this._day = newVal;
      this.render();
      this.selectDay();
    }
  }

  // 组件挂载到DOM时初始化
  connectedCallback() {
    this.render();
    this.selectDay();
  }

  // 日历渲染逻辑，你可以替换为自己原有的渲染代码
  render() {
    this.shadowRoot.innerHTML = `
      <style>
        .active {
          background: #2196f3;
          color: #fff;
          border-radius: 4px;
        }
        li {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          width: 32px;
          height: 32px;
          list-style: none;
          margin: 2px;
          cursor: pointer;
        }
      </style>
      <ul>
        <li id="1">1</li>
        <li id="2">2</li>
        <li id="3">3</li>
        <li id="4">4</li>
        <li id="5">5</li>
        <!-- 补充其余日期的li即可 -->
      </ul>
    `;
  }

  selectDay() {
    // 先判断目标元素是否存在，避免非法参数报错
    const targetEl = this.shadowRoot.getElementById(this._day);
    if (!targetEl) return;
    // 移除之前的选中状态
    const prevActive = this.shadowRoot.querySelector('.active');
    if (prevActive) prevActive.classList.remove('active');
    // 给当前选中日期加类
    targetEl.classList.add('active');
  }
}

// 注册自定义元素
customElements.define('calendar-sheet', CalendarSheet);

适配说明 #

• 如果你使用Lit等Web Components封装框架，将代码中的this.shadowRoot替换为this.renderRoot即可
• 如果你已经有独立的渲染逻辑，只需要保证selectDay在渲染函数执行完成、DOM已生成后调用即可
• 代码已支持day属性动态修改，不需要额外做监听处理

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