本文旨在解决html自定义元素在扩展内置元素时，如htmlcanvaselement，遇到的属性（例如width）无法正确识别的问题。核心在于阐明当自定义元素扩展内置html元素时，必须通过在标准html标签上使用is属性来实例化，而非直接使用自定义标签名，从而确保属性和行为的正确继承与应用。
HTML自定义元素扩展内置元素时的属性识别机制
HTML自定义元素（Custom Elements）是Web Components规范的一部分，允许开发者创建新的HTML标签或扩展现有HTML元素。它们分为两种类型：自主自定义元素（Autonomous Custom Elements）和定制内置元素（Customized Built-in Elements）。本文主要关注后者，即当自定义元素需要扩展一个已有的HTML元素（如<div>、<p>、<canvas>等）时，如何正确处理其属性。
一个常见的场景是，开发者希望创建一个继承自<canvas>的自定义元素，并为其添加特定的渲染逻辑。然而，在使用过程中可能会发现，即使在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 width="500" height="500" style="border: 3px solid black"></render-area>
<button onclick="console.log(document.querySelector('render-area').width)">记录 render-area 的宽度</button>当点击按钮执行console.log(document.querySelector('render-area').width)时，输出结果将是undefined。这是因为浏览器将<render-area>视为一个自主自定义元素，而非一个继承了<canvas>所有特性和属性的定制内置元素。虽然Renderer类继承了HTMLCanvasElement，但直接使用<render-area>标签并不能让浏览器知道它应该被视为一个<canvas>元素，因此其不具备canvas元素的标准属性行为。
解决方案：使用is属性
要正确地实例化一个定制内置元素，必须使用其所扩展的内置HTML标签，并通过is属性来指定自定义元素的名称。is属性告诉浏览器，尽管这是一个标准的HTML元素（例如<canvas>），但它应该表现为我们定义的定制自定义元素。
根据MDN Web Docs的描述，定制内置元素继承自基本的HTML元素。要创建这类元素，必须指定它们扩展哪个元素，并且在使用时，需要写出基本的元素标签，并通过is属性指定自定义元素的名称。
以下是修正后的代码示例：
JavaScript 定义保持不变：
class Renderer extends HTMLCanvasElement {
constructor() {
super();
// 可以在这里添加自定义的初始化逻辑
}
// 其他自定义方法或属性
}
customElements.define("render-area", Renderer, { extends: 'canvas' });HTML 实例化方式：
<canvas is="render-area" width="500" height="500" style="border: 3px solid black"></canvas>
<button onclick="console.log(document.querySelector('[is=render-area]').width)">记录 render-area 的宽度</button>在这种情况下，当点击按钮时，console.log(document.querySelector('[is=render-area]').width)将正确输出500。浏览器现在将<canvas is="render-area">识别为一个特殊的<canvas>元素，它继承了Renderer类的行为和属性，同时也保留了标准<canvas>元素的所有特性，包括width和height属性的正确解析和访问。
关键要点与注意事项
- is属性的必要性： 当你的自定义元素通过{ extends: 'tagName' }选项定义时，它就是一个定制内置元素。在HTML中实例化它时，务必使用is="your-custom-tag-name"属性在相应的内置标签上。
- 选择器： 在JavaScript中获取定制内置元素时，可以使用属性选择器[is=your-custom-tag-name]，或者更具体的tagName[is=your-custom-tag-name]，例如document.querySelector('canvas[is=render-area]')。
- 继承与行为： 使用is属性确保了自定义元素不仅继承了JavaScript类中定义的行为，也继承了其所扩展的内置HTML元素的所有标准行为和属性处理机制。
- 自主自定义元素对比： 对于不扩展任何内置元素的自主自定义元素（例如<my-component></my-component>），则不需要使用is属性，直接使用自定义标签名即可。
总结
正确理解和使用is属性是开发定制内置HTML自定义元素的关键。它确保了自定义元素能够充分利用其所扩展的内置元素的特性，同时融入自定义的行为逻辑。通过遵循这一规范，开发者可以避免在处理属性时遇到undefined等问题，从而构建出更健壮、符合预期的Web组件。
