自定义元素是Web组件的核心，通过JavaScript的customElements.define()方法可创建独立或扩展原生元素的组件，结合Shadow DOM实现样式与结构隔离，利用observedAttributes和attributeChangedCallback响应属性变化，从而构建高内聚、低耦合、不依赖框架的可复用Web组件。
Web组件是一套允许开发者创建可重用、封装良好的自定义HTML元素的技术，而JavaScript在其中扮演核心角色。它让前端开发不再依赖框架就能实现组件化。自定义元素是Web组件的基石之一，通过JavaScript可以定义自己的HTML标签，并赋予其行为和结构。
什么是自定义元素？
自定义元素是Web平台的一部分，允许你定义新的HTML标签。这些标签可以像原生元素一样使用，同时拥有自己的逻辑和状态。浏览器通过customElements.define()方法注册新元素，该元素必须继承自HTMLElement或其子类。
例如，你可以创建一个名为的按钮组件：
class MyButton extends HTMLElement {
constructor() {
super();
this.textContent = “点击我”;
this.style.padding = “10px”;
this.style.background = “#007bff”;
this.style.color = “white”;
this.style.borderRadius = “4px”;
this.addEventListener(“click”, () => {
alert(“按钮被点击了！”);
});
}
}
customElements.define(“my-button”, MyButton);
之后就可以在HTML中直接使用：。
立即学习“Java免费学习笔记（深入）”；
自定义元素的类型
有两种类型的自定义元素：
自治自定义元素（Autonomous custom elements）：完全独立的新元素，继承自HTMLElement，比如上面的my-button。 定制内置元素（Customized built-in elements）：扩展已有HTML元素的功能。需要在define()时指定第三个参数{ extends: ‘button’ }，然后通过is属性使用。
例如，扩展原生按钮：
class FancyButton extends HTMLButtonElement {
connectedCallback() {
this.style.fontSize = “18px”;
this.style.background = “linear-gradient(blue, purple)”;
}
}
customElements.define(“fancy-button”, FancyButton, { extends: “button” });
使用方式为：。
结合Shadow DOM实现封装
真正让Web组件强大的是Shadow DOM。它可以将样式和结构隔离于主文档之外，避免全局污染。
在构造函数中调用this.attachShadow({ mode: ‘open’ })即可启用Shadow DOM。
class UserProfile extends HTMLElement {
constructor() {
super();
this.shadow = this.attachShadow({ mode: “open” });
const name = this.getAttribute(“name”) || “匿名用户”;
this.shadow.innerHTML = `
.card { border: 1px solid #ddd; padding: 16px; border-radius: 8px; }
.name { font-size: 1.2em; color: #333; }
`;
}
}
customElements.define(“user-profile”, UserProfile);
现在每个都有独立样式，不会影响页面其他部分。
响应属性变化
为了让组件更灵活，通常需要监听属性变化。可以通过静态getterobservedAttributes指定要监控的属性，并实现attributeChangedCallback方法。
static get observedAttributes() {
return [“name”, “level”];
}
attributeChangedCallback(name, oldValue, newValue) {
if (name === “name”) {
this.shadow.querySelector(“.name”).textContent = newValue;
}
}
这样当外部修改name属性时，组件会自动更新显示内容。
基本上就这些。用好自定义元素加Shadow DOM，就能写出不依赖框架、高内聚、低耦合的组件。虽然没有React那样的JSX语法糖，但胜在标准、轻量、兼容现代浏览器。适合构建设计系统、工具库或渐进式增强项目。
以上就是JavaScript Web组件与自定义元素的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1534307.html
微信扫一扫 
支付宝扫一扫 
