跳转到主内容
新派编程网 - 新潮编程理念，全新技术课堂！
📁 网站地图

is属性的作用？HTML自定义内置元素使用方法

林译川
林译川
• 👁 0人浏览过
is属性是定制化内置元素的唯一合法入口，必须用原生标签（如）配合is属性（如）并注册时指定{extends:"canvas"}，才能使元素真正继承HTMLCanvasElement原型链。 is属性是定制化内置元素的唯一合法入口 浏览器解析 HTML 时，不会根据 JavaScript 中的
customElements.define()
自动把任意标签名映射为扩展自某个内置类的实例。如果你写
并注册了
class RenderArea extends HTMLCanvasElement
，这个元素在 DOM 中仍是
HTMLElement
实例，
width
、
getContext()
等 canvas 特有属性和方法全部不可用——因为浏览器根本没把它当 canvas。
is
属性的作用就是显式告诉浏览器：“这个原生标签（比如
）应该被我注册的自定义类接管”。只有这样，实例才真正继承
HTMLCanvasElement
的原型链和内置行为。 必须用原生标签 + is 属性，不能用自定义标签名 以下写法全部错误：
—— 浏览器不认识该标签，降级为
HTMLUnknownElement
—— class 不触发自定义类升级
—— 正确，但前提是已用
customElements.define("render-area", RenderArea, { extends: "canvas" })
注册 关键点： 立即学习 “ 前端免费学习笔记（深入） ”； 注册时必须传入
{ extends: "canvas" }
（或
"button"
、
"input"
等），否则
is
无效 HTML 中只能用
，不能用
is
值必须与
customElements.define()
第一个参数完全一致（大小写敏感） data-* 和 is 属性毫无关系，别混用 有人误以为
data-is="xxx"
或
data-custom="canvas"
能替代
is
，这是错的。HTML 规范中只有原生
is
属性具备语义升级能力；所有
data-
属性只是普通字符串数据，对元素类型、原型链、内置 API 完全无影响。 使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件 如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更 下载 常见混淆场景： 想用
模拟 canvas 行为？不行，它没有
getContext()
用
element.setAttribute("is", "my-button")
动态添加？无效，
is
只在元素创建时起作用（即 HTML 解析或
document.createElement("button", { is: "my-button" })
） 服务端渲染时写死
？可以，但需确保客户端已提前注册该类，否则降级为普通 button 动态创建定制化内置元素要用 createElement() 的第二个参数 不能靠
innerHTML = ""
，因为
innerHTML
解析不触发
is
升级。正确方式是：
const el = document.createElement("canvas", { is: "render-area" }); // 而不是： // const el = document.createElement("render-area"); // ❌ // const el = document.createElement("canvas"); el.setAttribute("is", "render-area"); // ❌
注意： 必须用对象形式传参：
{ is: "xxx" }
，字符串形式（如
"render-area"
）会报错 该 API 在 Safari 中支持较晚（iOS 16.4+/macOS 13.3+），旧版需降级处理或避免使用 SSR 渲染后 hydrate 时，若 JS 尚未加载完成，
is
元素会短暂表现为普通原生元素（如无宽高的
），这是预期行为 最易被忽略的一点：
is
不是“加个属性就变类型”，它是声明式绑定，只在元素初始化阶段生效；后续修改
is
属性值不会改变实例类型，也不会重新构造原型链。

相关文章