如何为继承旧元素的自定义元素配置Polymer Linter/构建工具？

我之前也碰到过一模一样的情况，问题核心在于你用PaperSliderClass这个运行时变量来标注继承关系——Polymer的静态分析工具（不管是Linter还是构建工具）没法追踪这个变量的实际类型，所以你的JSDoc指令才没生效。下面是几个亲测有效的解决办法：

方法1：直接引用原元素的类名 #

原paper-slider元素的类名其实是PaperSlider（这是Polymer元素的常规命名规范），你可以直接在@extends里写这个类名，而非你定义的变量：

// 先确保已经导入paper-slider元素
import '@polymer/paper-slider/paper-slider.js';

/**
 * @polymer
 * @customElement
 * @extends {PaperSlider}
 */
class MyPaperSlider extends customElements.get('paper-slider') {
  // 你的自定义逻辑示例
  connectedCallback() {
    super.connectedCallback();
    // 比如修改滑块默认激活色
    this.style.setProperty('--paper-slider-active-color', '#ff4081');
  }
}

// 别忘了注册你的自定义元素
customElements.define('my-paper-slider', MyPaperSlider);

这样静态分析工具就能直接关联到原元素的类型定义，正确识别继承关系。

方法2：手动补充类型声明（无原元素类型文件时用） #

如果paper-slider没有提供TypeScript类型定义文件（.d.ts），你可以手动在JSDoc里补充基础类型信息，帮Linter理清结构：

import '@polymer/paper-slider/paper-slider.js';

/**
 * 手动声明PaperSlider类的核心结构，辅助Linter识别
 * @class PaperSlider
 * @extends {HTMLElement}
 * @property {number} value - 滑块当前值
 * @property {number} min - 滑块最小值
 * @property {number} max - 滑块最大值
 * @method setValue - 设置滑块值的方法
 */

/**
 * @polymer
 * @customElement
 * @extends {PaperSlider}
 */
class MyPaperSlider extends customElements.get('paper-slider') {
  // 你的自定义代码
}

customElements.define('my-paper-slider', MyPaperSlider);

方法3：检查Polymer构建配置 #

还要确认你的polymer.json配置里包含了paper-slider的文件，这样构建工具才能正确解析依赖关系：

{
  "sources": [
    "src/**/*.js",
    "node_modules/@polymer/paper-slider/**/*.js"
  ]
}

这些方法应该能让Polymer的工具正确识别你的继承关系了！

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