深入理解HTML自定义元素：解决内置元素扩展中的属性识别问题

、等）时，如何正确处理其属性。

一个常见的场景是，开发者希望创建一个继承自的自定义元素，并为其添加特定的渲染逻辑。然而，在使用过程中可能会发现，即使在HTML中为该自定义元素设置了width或height属性，通过JavaScript访问时这些属性却显示为undefined。这通常是由于对定制内置元素的实例化方式存在误解。

问题示例：width属性无法识别

假设我们定义了一个名为Renderer的自定义元素，它扩展了HTMLCanvasElement：

class Renderer extends HTMLCanvasElement {
  constructor() {
    super();
    // 可以在这里添加自定义的初始化逻辑
  }
  // 其他自定义方法或属性
}

// 定义自定义元素，并指定它扩展 'canvas'
customElements.define("render-area", Renderer, { extends: 'canvas' });

在HTML中，我们可能会尝试像使用自主自定义元素一样直接使用自定义标签名：

立即学习“前端免费学习笔记（深入）”；

记录 render-area 的宽度

当点击按钮执行console.log(document.querySelector('render-area').width)时，输出结果将是undefined。这是因为浏览器将视为一个自主自定义元素，而非一个继承了所有特性和属性的定制内置元素。虽然Renderer类继承了HTMLCanvasElement，但直接使用标签并不能让浏览器知道它应该被视为一个元素，因此其不具备canvas元素的标准属性行为。

解决方案：使用is属性

要正确地实例化一个定制内置元素，必须使用其所扩展的内置HTML标签，并通过is属性来指定自定义元素的名称。is属性告诉浏览器，尽管这是一个标准的HTML元素（例如），但它应该表现为我们定义的定制自定义元素。

美图AI开放平台

美图推出的AI人脸图像处理平台

下载

根据MDN Web Docs的描述，定制内置元素继承自基本的HTML元素。要创建这类元素，必须指定它们扩展哪个元素，并且在使用时，需要写出基本的元素标签，并通过is属性指定自定义元素的名称。

以下是修正后的代码示例：

JavaScript 定义保持不变：

class Renderer extends HTMLCanvasElement {
  constructor() {
    super();
    // 可以在这里添加自定义的初始化逻辑
  }
  // 其他自定义方法或属性
}

customElements.define("render-area", Renderer, { extends: 'canvas' });

HTML 实例化方式：

记录 render-area 的宽度

在这种情况下，当点击按钮时，console.log(document.querySelector('[is=render-area]').width)将正确输出500。浏览器现在将识别为一个特殊的元素，它继承了Renderer类的行为和属性，同时也保留了标准元素的所有特性，包括width和height属性的正确解析和访问。

关键要点与注意事项

1. is属性的必要性： 当你的自定义元素通过{ extends: 'tagName' }选项定义时，它就是一个定制内置元素。在HTML中实例化它时，务必使用is="your-custom-tag-name"属性在相应的内置标签上。
2. 选择器： 在JavaScript中获取定制内置元素时，可以使用属性选择器[is=your-custom-tag-name]，或者更具体的tagName[is=your-custom-tag-name]，例如document.querySelector('canvas[is=render-area]')。
3. 继承与行为： 使用is属性确保了自定义元素不仅继承了JavaScript类中定义的行为，也继承了其所扩展的内置HTML元素的所有标准行为和属性处理机制。
4. 自主自定义元素对比： 对于不扩展任何内置元素的自主自定义元素（例如），则不需要使用is属性，直接使用自定义标签名即可。

总结

正确理解和使用is属性是开发定制内置HTML自定义元素的关键。它确保了自定义元素能够充分利用其所扩展的内置元素的特性，同时融入自定义的行为逻辑。通过遵循这一规范，开发者可以避免在处理属性时遇到undefined等问题，从而构建出更健壮、符合预期的Web组件。