Lit Element文件上传组件：选中文件显示取消按钮及样式报错解决

错误原因 #

你遇到的Property 'style' does not exist on type 'Element'错误，是因为querySelector('#cancel-btn')返回的类型是Element | null，而style属性属于更具体的HTMLElement类型，TypeScript无法自动推断元素类型，所以抛出类型错误。

解决方案 #

方案1：修正TypeScript类型（直接操作DOM） #

给cancelButton的getter指定明确的返回类型，让TypeScript识别这是按钮元素：

get cancelButton(): HTMLButtonElement | null {
  return this.querySelector("#cancel-btn");
}

修改后，this.cancelButton!.style.visibility = "visible"就能通过TypeScript类型检查，因为此时类型已明确为包含style属性的HTMLButtonElement。

方案2：Lit推荐的响应式实现（更优） #

直接操作DOM样式不符合Lit的响应式设计理念，推荐用响应式属性驱动UI状态，更易维护且符合组件设计规范：

1. 添加响应式属性控制按钮显示状态

@property({ type: Boolean })
showCancelBtn = false;

2. 用样式绑定控制按钮显示

方式A：内联style绑定

在模板的取消按钮上绑定visibility样式：

<button
  class="cancel-btn"
  id="cancel-btn"
  @click="${this._cancelHandler}"
  style="visibility: ${this.showCancelBtn ? 'visible' : 'hidden'}"
>
  Cancel
</button>

方式B：CSS类绑定（推荐）

先在Style.Uploader.js中添加样式类：

.cancel-btn {
  visibility: hidden;
}
.cancel-btn.visible {
  visibility: visible;
}

然后在模板中动态添加类：

<button
  class="cancel-btn ${this.showCancelBtn ? 'visible' : ''}"
  id="cancel-btn"
  @click="${this._cancelHandler}"
>
  Cancel
</button>

3. 在业务逻辑中更新状态

private async _inputHandler(e: Event) {
  const input = e.target as HTMLInputElement;
  this.files = input.files;

  if (!(this.files && this.files[0])) {
    this.showCancelBtn = false;
    return;
  } else {
    const uploadedFileSize = this.files[0]?.size;
    const uploadedFileName = this.files[0]?.name;
    const uploadedFileType = FileExtensionService.getFileExtension(uploadedFileName);

    const validFileSize = await validateFileSize(uploadedFileSize);
    const validFileType = await validateFileType(uploadedFileType);
    
    // 仅当文件验证通过时显示取消按钮
    this.showCancelBtn = validFileSize.isValid && validFileType.isValid;

    if (!validFileSize.isValid) {
      // ... 你的错误处理逻辑
    }
  }
}

private _cancelHandler(e: Event) {
  e.preventDefault();
  this.files = null;
  this.fileName = "";
  this.fileType = "";
  this.fileSizeInKB = 0;
  this.showCancelBtn = false; // 取消后隐藏按钮
  this.requestUpdate();
}

额外注意点 #

你代码中uploadButton的@query装饰器参数错误，应该用id选择器@query("#upload-btn")，而不是@query("upload-btn")（后者会查找<upload-btn>自定义元素，不是id为upload-btn的按钮）：

@query("#upload-btn") uploadButton!: HTMLButtonElement;

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