本文旨在详细阐述html自定义内置元素（customized built-in elements）的正确创建与使用方式，重点解析在扩展原生html标签时，为何必须借助`is`属性而非直接使用自定义标签名，并提供具体的代码示例，以确保自定义元素能正确继承并访问原生元素的属性和方法。
理解自定义内置元素
Web Components规范允许开发者创建两种类型的自定义元素：
-
自主自定义元素 (Autonomous Custom Elements)：这类元素完全独立，拥有自己的标签名（必须包含连字符，例如
）。它们不继承任何现有HTML元素，从HTMLElement基类派生。 - 自定义内置元素 (Customized Built-in Elements)：这类元素扩展了现有的HTML元素（例如 HTMLCanvasElement, HTMLParagraphElement 等），并继承了其所有属性和方法。它们在注册时需要指定所扩展的原生元素，并且在使用时必须通过原生元素的标签名配合is属性来实例化。
问题中遇到的width属性未定义的情况，正是由于混淆了这两种自定义元素的使用方式。当一个自定义元素旨在扩展例如canvas>这样的原生元素时，它属于自定义内置元素。
is属性的核心作用
对于自定义内置元素，其核心机制在于is属性。MDN Web Docs明确指出，要创建和使用定制的内置元素，必须指定它们所扩展的元素，并且在使用时，要通过书写基础元素标签并指定自定义元素名称在is属性中。例如，
word-count"> 或 document.createElement("p", { is: "word-count" })。
这意味着，即使您定义了一个名为render-area的自定义元素来扩展
立即学习“前端免费学习笔记（深入）”；
正确实现与使用自定义内置元素
让我们通过一个具体的例子来演示如何正确地创建一个扩展HTMLCanvasElement的自定义内置元素，并确保其原生属性如width能够被正确访问。
1. 定义自定义元素类
首先，我们需要定义一个JavaScript类，该类继承自目标原生HTML元素（在此例中为HTMLCanvasElement）。
class Renderer extends HTMLCanvasElement {
constructor() {
// 必须调用 super() 来正确初始化继承的实例
super();
// 可以在这里添加自定义的初始化逻辑
console.log('Renderer custom element initialized.');
}
// 可以在这里添加自定义方法或生命周期回调
connectedCallback() {
console.log('Renderer connected to DOM.');
// 此时，原生 canvas 属性如 width, height 应该已经可用
console.log(`Canvas width from connectedCallback: ${this.width}`);
}
}2. 注册自定义元素
使用customElements.define()方法注册自定义元素。关键在于，对于自定义内置元素，需要提供一个配置对象，其中包含extends属性，指明所扩展的原生标签名。
// 注册名为 "render-area" 的自定义元素，并指定它扩展 'canvas' 元素
customElements.define("render-area", Renderer, { extends: 'canvas' });3. 在HTML中正确使用自定义元素
这是最容易出错的环节。由于render-area是一个自定义内置元素，它扩展了
错误的使用方式（导致原生属性无法访问）：
在这种情况下，document.querySelector('render-area').width很可能会输出undefined，因为浏览器将
正确的实现方式：
在这个正确的示例中，document.querySelector('[is=render-area]')会找到那个被定制的
完整示例代码
Customized Built-in Element Tutorial
自定义内置元素：`is`属性的正确用法
请观察控制台输出，了解 `width` 属性的访问情况。
注意事项与总结
- 区分类型：始终明确您是在创建自主自定义元素（完全新的标签）还是自定义内置元素（扩展现有标签）。
- is属性的强制性：对于自定义内置元素，is属性是不可或缺的。它告诉浏览器将一个标准HTML元素视为一个特定自定义元素的实例。
- 属性继承：通过is属性正确实例化后，自定义内置元素将继承所有原生元素的属性、方法和事件，从而能够无缝地利用原生元素的功能。
- DOM查询：在查询自定义内置元素时，应使用其原生标签名结合is属性进行选择，例如 document.querySelector('canvas[is="render-area"]')。
理解并正确应用is属性是有效利用自定义内置元素、构建功能丰富且符合标准Web组件的关键。通过遵循上述指南，开发者可以避免常见的陷阱，确保自定义元素能够充分发挥其继承自原生元素的强大能力。
