本文旨在详细阐述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属性中。例如，
或 document.createElement(“p”, { is: “word-count” })。
这意味着，即使您定义了一个名为render-area的自定义元素来扩展，您也不能直接在HTML中使用标签。这样做，浏览器会将其解析为一个自主自定义元素，而不是一个继承了所有特性的定制版本。因此，诸如width、height等属于原生元素的属性，将无法被正确识别和访问。
立即学习“前端免费学习笔记（深入）”；
正确实现与使用自定义内置元素
让我们通过一个具体的例子来演示如何正确地创建一个扩展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是一个自定义内置元素，它扩展了，因此在HTML中必须使用标签，并通过is=”render-area”属性来指定其为我们定义的自定义版本。
错误的使用方式（导致原生属性无法访问）：
在这种情况下，document.querySelector(‘render-area’).width很可能会输出undefined，因为浏览器将视为一个独立的、不具备原生属性的元素。
正确的实现方式：
在这个正确的示例中，document.querySelector(‘[is=render-area]’)会找到那个被定制的元素，并且width属性将正确地返回500。
完整示例代码
Customized Built-in Element Tutorial 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; }自定义内置元素：`is`属性的正确用法
请观察控制台输出，了解 `width` 属性的访问情况。
// 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.'); } }
注意事项与总结
区分类型：始终明确您是在创建自主自定义元素（完全新的标签）还是自定义内置元素（扩展现有标签）。is属性的强制性：对于自定义内置元素，is属性是不可或缺的。它告诉浏览器将一个标准HTML元素视为一个特定自定义元素的实例。属性继承：通过is属性正确实例化后，自定义内置元素将继承所有原生元素的属性、方法和事件，从而能够无缝地利用原生元素的功能。DOM查询：在查询自定义内置元素时，应使用其原生标签名结合is属性进行选择，例如 document.querySelector(‘canvas[is=”render-area”]’)。
理解并正确应用is属性是有效利用自定义内置元素、构建功能丰富且符合标准Web组件的关键。通过遵循上述指南，开发者可以避免常见的陷阱，确保自定义元素能够充分发挥其继承自原生元素的强大能力。
以上就是掌握HTML自定义内置元素：深入理解is属性的正确用法的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1589484.html
微信扫一扫 
支付宝扫一扫 
