如何在TS文件中获取HTML自定义标签sh-toggle的label属性值

方法1：使用原生DOM的getAttribute方法（最通用，无需额外适配） #

所有DOM元素都支持原生getAttribute方法直接读取标签上的属性值，不受自定义组件限制，代码如下：

const toggleEl = document.getElementById('ABCD');
const labelValue = toggleEl?.getAttribute('label');
console.log(labelValue); // 输出 ABCD

如果需要处理属性动态更新的场景，也可以配合setAttribute修改属性，或者用MutationObserver监听属性变化。

方法2：声明自定义元素类型后直接访问实例属性（适配Web Components规范组件） #

如果你的sh-toggle是遵循Web Components规范开发的，已经把label属性映射为组件实例属性，可以先给TS补充自定义元素的类型声明，再直接访问属性：

// 声明sh-toggle元素的类型
interface ShToggleElement extends HTMLElement {
  label: string;
  // 其他组件属性可在此处补充
}

declare global {
  interface HTMLElementTagNameMap {
    'sh-toggle': ShToggleElement;
  }
}

// 获取元素时自动推导类型
const toggleEl = document.querySelector<ShToggleElement>('#ABCD');
const labelValue = toggleEl?.label;
console.log(labelValue); // 输出 ABCD

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