本文旨在详细阐述html自定义内置元素（customized built-in elements）的正确创建与使用方式，重点解析在扩展原生html标签时，为何必须借助`is`属性而非直接使用自定义标签名，并提供具体的代码示例，以确保自定义元素能正确继承并访问原生元素的属性和方法。
理解自定义内置元素
Web Components规范允许开发者创建两种类型的自定义元素：
- 自主自定义元素 (Autonomous Custom Elements)：这类元素完全独立，拥有自己的标签名（必须包含连字符，例如 <my-component>）。它们不继承任何现有HTML元素，从HTMLElement基类派生。
- 自定义内置元素 (Customized Built-in Elements)：这类元素扩展了现有的HTML元素（例如 HTMLCanvasElement, HTMLParagraphElement 等），并继承了其所有属性和方法。它们在注册时需要指定所扩展的原生元素，并且在使用时必须通过原生元素的标签名配合is属性来实例化。
问题中遇到的width属性未定义的情况，正是由于混淆了这两种自定义元素的使用方式。当一个自定义元素旨在扩展例如<canvas>这样的原生元素时，它属于自定义内置元素。
is属性的核心作用
对于自定义内置元素，其核心机制在于is属性。MDN Web Docs明确指出，要创建和使用定制的内置元素，必须指定它们所扩展的元素，并且在使用时，要通过书写基础元素标签并指定自定义元素名称在is属性中。例如，<p is="word-count"> 或 document.createElement("p", { is: "word-count" })。
这意味着，即使您定义了一个名为render-area的自定义元素来扩展<canvas>，您也不能直接在HTML中使用<render-area>标签。这样做，浏览器会将其解析为一个自主自定义元素，而不是一个继承了<canvas>所有特性的定制版本。因此，诸如width、height等属于<canvas>原生元素的属性，将无法被正确识别和访问。
立即学习“前端免费学习笔记（深入）”；
正确实现与使用自定义内置元素
让我们通过一个具体的例子来演示如何正确地创建一个扩展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是一个自定义内置元素，它扩展了<canvas>，因此在HTML中必须使用<canvas>标签，并通过is="render-area"属性来指定其为我们定义的自定义版本。
错误的使用方式（导致原生属性无法访问）：
<!-- 错误示例：直接使用自定义标签名，width属性可能无法识别 -->
<render-area width="500" height="500" style="border: 3px solid black"></render-area>
<button onclick="console.log(document.querySelector('render-area').width)">
log width of render area (错误方式)
</button>在这种情况下，document.querySelector('render-area').width很可能会输出undefined，因为浏览器将<render-area>视为一个独立的、不具备原生<canvas>属性的元素。
正确的实现方式：
<!-- 正确示例：使用原生 canvas 标签，并通过 is 属性指定自定义元素 -->
<canvas is="render-area" width="500" height="500" style="border: 3px solid black"></canvas>
<button onclick="console.log(document.querySelector('[is=render-area]').width)">
log width of render area (正确方式)
</button>在这个正确的示例中，document.querySelector('[is=render-area]')会找到那个被定制的<canvas>元素，并且width属性将正确地返回500。
完整示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Customized Built-in Element Tutorial</title>
<style>
body { font-family: sans-serif; margin: 20px; }
canvas[is="render-area"] { border: 3px solid black; background-color: #f0f0f0; }
button { margin-top: 10px; padding: 10px 15px; cursor: pointer; }
</style>
</head>
<body>
<h1>自定义内置元素：`is`属性的正确用法</h1>
<p>请观察控制台输出，了解 `width` 属性的访问情况。</p>
<!-- 正确使用方式：扩展 canvas 元素 -->
<canvas is="render-area" width="500" height="500"></canvas>
<button onclick="logCanvasWidth()">Log Width of render-area</button>
<script>
// 1. 定义自定义元素类
class Renderer extends HTMLCanvasElement {
constructor() {
super();
console.log('Renderer custom element constructor called.');
}
connectedCallback() {
console.log('Renderer connected to DOM.');
// 此时，原生 canvas 属性如 width, height 应该已经可用
console.log(`Canvas width from connectedCallback: ${this.width}`);
const ctx = this.getContext('2d');
if (ctx) {
ctx.fillStyle = 'lightblue';
ctx.fillRect(0, 0, this.width, this.height);
ctx.fillStyle = 'red';
ctx.font = '24px Arial';
ctx.textAlign = 'center';
ctx.fillText('Hello, Custom Canvas!', this.width / 2, this.height / 2);
}
}
}
// 2. 注册自定义元素
customElements.define("render-area", Renderer, { extends: 'canvas' });
// 3. 按钮点击事件处理函数
function logCanvasWidth() {
const customCanvas = document.querySelector('canvas[is="render-area"]');
if (customCanvas) {
console.log(`Width of custom render-area (from button click): ${customCanvas.width}`);
console.log(`Height of custom render-area (from button click): ${customCanvas.height}`);
} else {
console.log('Custom render-area element not found.');
}
}
</script>
</body>
</html>注意事项与总结
- 区分类型：始终明确您是在创建自主自定义元素（完全新的标签）还是自定义内置元素（扩展现有标签）。
- is属性的强制性：对于自定义内置元素，is属性是不可或缺的。它告诉浏览器将一个标准HTML元素视为一个特定自定义元素的实例。
- 属性继承：通过is属性正确实例化后，自定义内置元素将继承所有原生元素的属性、方法和事件，从而能够无缝地利用原生元素的功能。
- DOM查询：在查询自定义内置元素时，应使用其原生标签名结合is属性进行选择，例如 document.querySelector('canvas[is="render-area"]')。
理解并正确应用is属性是有效利用自定义内置元素、构建功能丰富且符合标准Web组件的关键。通过遵循上述指南，开发者可以避免常见的陷阱，确保自定义元素能够充分发挥其继承自原生元素的强大能力。
