构建可复用组件需封装、独立与易集成，Web Components 提供原生支持。1. 使用 Custom Elements 定义自定义标签，通过 customElements.define() 注册继承 HTMLElement 的类，实现自定义元素；2. 结合 Shadow DOM 隔离样式与结构，在构造函数中调用 attachShadow() 并设置 shadowRoot.innerHTML，避免全局污染；3. 支持属性与事件，通过 observedAttributes 监听属性变化，attributeChangedCallback 触发更新，dispatchEvent 派发事件实现交互；4. 组件可在任意项目中使用，不依赖框架，适合设计系统共享，关键在于属性同步、事件通信和样式封装。
构建可复用组件的关键在于封装、独立性和易集成。JavaScript 的 Web Components 技术提供了一套浏览器原生支持的 API，让你可以创建自定义 HTML 元素，并在任何框架或无框架项目中使用。以下是具体实现方式。
使用 Custom Elements 创建自定义标签
Custom Elements 允许你定义自己的 HTML 标签，这是构建可复用组件的基础。
通过 customElements.define() 方法注册一个类继承自 HTMLElement 的组件：
class MyButton extends HTMLElement {
connectedCallback() {
if (!this.rendered) {
this.innerHTML = ``;
this.rendered = true;
}
}
}
customElements.define(‘my-button’, MyButton);
之后就可以在 HTML 中直接使用：提交。
立即学习“Java免费学习笔记（深入）”；
结合 Shadow DOM 实现样式和结构隔离
Shadow DOM 能将组件的 DOM 和 CSS 封装起来，避免全局污染。
在组件构造函数中挂载 Shadow Root：
class MyCard extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: ‘open’ });
}
connectedCallback() {
const title = this.getAttribute(‘title’) || ‘默认标题’;
this.shadowRoot.innerHTML = `
.card { border: 1px solid #ddd; padding: 16px; border-radius: 8px; font-family: sans-serif; }
${title}
`;
}
}
customElements.define(‘my-card’, MyCard);
使用时内容可通过 插入：姓名：张三。
支持属性与事件，提升交互能力
为了让组件更灵活，应响应属性变化并对外派发事件。
利用 static get observedAttributes() 监听属性变更：
class MyInput extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: ‘open’ });
}
static get observedAttributes() {
return [‘label’, ‘value’];
}
attributeChangedCallback(attrName, oldValue, newValue) {
if (oldValue === newValue) return;
this.render();
}
render() {
const label = this.getAttribute(‘label’) || ‘输入框’;
const value = this.getAttribute(‘value’) || ”;
this.shadowRoot.innerHTML = `
`;
this.shadowRoot.querySelector(‘input’).addEventListener(‘input’, e => {
this.dispatchEvent(new CustomEvent(‘change’, { detail: e.target.value }));
this.setAttribute(‘value’, e.target.value);
});
}
connectedCallback() {
this.render();
}
}
customElements.define(‘my-input’, MyInput);
外部可监听事件：。
基本上就这些。Web Components 不依赖任何框架，适合打造设计系统或跨项目共享组件。只要注意属性同步、事件通信和样式封装，就能写出真正可复用的元素。不复杂但容易忽略细节。
以上就是如何利用JavaScript的Web Components构建可复用组件？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1526285.html
微信扫一扫 
支付宝扫一扫 
