Custom Elements 允许创建自定义 HTML 元素，需继承 HTMLElement 并通过 customElements.define() 注册；标签名必须含连字符，支持 connectedCallback、attributeChangedCallback 等生命周期方法，结合 Shadow DOM 可构建封装良好的可复用组件。
HTML5 Custom Elements 是 Web Components 的一部分，允许开发者创建自定义的 HTML 元素，并赋予它们特定的行为和结构。使用 Custom Elements 可以封装可复用的组件，提升代码组织性和可维护性。
1. 定义自定义元素
要创建一个自定义元素，需要继承 HTMLElement 或其子类，然后通过 customElements.define() 方法注册元素。
示例：创建一个简单的自定义元素
class MyGreeting extends HTMLElement { constructor() { super(); // 创建影子 DOM 来封装内部结构 this.attachShadow({ mode: 'open' }); // 设置内部内容 this.shadowRoot.innerHTML = ` p { color: blue; font-family: sans-serif; } Hello, !
立即学习“前端免费学习笔记（深入）”；
`; }}// 注册自定义元素customElements.define('my-greeting', MyGreeting);
在 HTML 中使用：
World
2. 自定义元素的命名规则
自定义元素的标签名必须包含连字符（-），这是为了防止与未来标准 HTML 元素冲突。
合法名称：
my-buttonuser-carddata-loader
非法名称：
mybutton（无连字符）div-custom（不推荐以标准标签开头）
3. 使用属性和生命周期回调
Custom Elements 支持多个生命周期钩子，可用于响应元素的状态变化。
常用生命周期方法：
connectedCallback()：元素插入 DOM 时调用disconnectedCallback()：元素从 DOM 移除时调用attributeChangedCallback()：属性变化时调用（需配合 observedAttributes）adoptedCallback()：元素被移动到新文档时调用
示例：响应属性变化
class MyCounter extends HTMLElement { static get observedAttributes() { return ['count']; } constructor() { super(); this.attachShadow({ mode: 'open' }); } connectedCallback() { this.render(); } attributeChangedCallback(name, oldValue, newValue) { if (name === 'count') { this.render(); } } render() { const count = this.getAttribute('count') || 0; this.shadowRoot.innerHTML = `Count: ${count}
`; }}customElements.define('my-counter', MyCounter);
使用方式：
4. 升级已存在的元素（可选）
如果页面中已有未定义的自定义标签，浏览器会将其视为未知元素。一旦定义完成，这些元素会被自动“升级”为自定义元素实例。
可通过以下方式检查是否已定义：
if (!customElements.get('my-widget')) { customElements.define('my-widget', MyWidget);}
基本上就这些。Custom Elements 提供了构建可复用、封装良好组件的基础能力，结合 Shadow DOM 和 HTML Templates 效果更佳。不复杂但容易忽略细节，比如命名规则和属性观察设置。
以上就是HTML5CustomElements怎么用_HTML5CustomElements创建自定义元素的方法的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1598271.html
微信扫一扫 
支付宝扫一扫 
