背景
现代化 Web 应用程序通常涉及实现各种自定义 UI 控件或组件，例如自定义下拉框、消息框、日历等。客户端框架提供了相对简便的方式来创建这些组件，例如通过自定义指令在 Angular 中创建组件、利用组件机制在 React 中构建组件、或者借助 Web Component 创建原生的可复用 UI 控件。本文将向大家介绍如何使用 Web Components 中的 Custom Elements 机制构建一个自定义消息框组件，并解决一些潜在的浏览器兼容问题。
Custom Elements 概述
Custom Elements 允许开发者扩展浏览器已经定义好的 HTML 元素，以实现自定义的标记。标准 API 定义了完整的自定义元素生命周期，可以用于连接 JavaScript 和扩展的 DOM 元素。以下是 CUSTOM ELEMENTS API 的简化示意图：
浏览器支持度
Custom Elements 非常新，目前的浏览器实现是在标准 API 测试套件的基础上进行开发的，并没有完全遵循最新规范。以下是目前的浏览器支持度情况：
- Chrome >= 54
- Edge >= 79
- Firefox >= 63
- Safari >= 10.1 (partial support)
自定义消息框组件
在这个例子中，我们将创建一个基于 Custom Elements 的自定义消息框组件。该组件可以轻松地添加到一个页面中，并提供一些自定义选项，例如消息框的类型 (success, warning, error, message)、框架的样式 (funky, minimal, boxy) 等等。
示例代码
以下是一个基本的自定义消息框组件：
// javascriptcn.com code example
class MessageBox extends HTMLElement {
constructor() {
super();
// 创建消息框的容器
this.wrapper = document.createElement('div');
this.wrapper.classList.add('messagebox-wrapper');
// 创建标题栏
const titleBar = document.createElement('div');
titleBar.classList.add('messagebox-titlebar');
const titleText = document.createElement('div');
titleText.classList.add('messagebox-titlebar-text');
titleText.innerText = this.getAttribute('title');
// 创建关闭按钮
const closeButton = document.createElement('div');
closeButton.classList.add('messagebox-close');
closeButton.innerText = 'x';
// 标题栏内添加组件
titleBar.appendChild(titleText);
titleBar.appendChild(closeButton);
// 创建内容区域
const content = document.createElement('div');
content.classList.add('messagebox-content');
content.innerText = this.getAttribute('message');
// 将组件添加到容器中
this.wrapper.appendChild(titleBar);
this.wrapper.appendChild(content);
// 将整个容器添加到页面中
document.body.appendChild(this.wrapper);
// 按下关闭按钮
closeButton.addEventListener('click', () => this.remove());
}
// 定义内部的样式规则
static get styles() {
return `
.messagebox-wrapper {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
background-color: #fff;
box-shadow: 0 6px 20px rgba(0,0,0,0.4);
}
.messagebox-titlebar {
display: flex;
justify-content: space-between;
align-items: center;
height: 50px;
background-color: #eee;
padding: 0 20px;
border-bottom: 1px solid #ccc;
}
.messagebox-close {
cursor: pointer;
}
.messagebox-content {
padding: 20px;
}`;
}
// 应用内部样式
connectedCallback() {
this.wrapper.attachShadow({ mode: 'open' });
this.wrapper.shadowRoot.innerHTML = `<style>${MessageBox.styles}</style>`;
}
}
window.customElements.define('message-box', MessageBox);如何使用？
现在，我们可以创建一个自定义消息框组件并向其传递所需的属性和值：
<message-box title="Welcome!" message="Hello, world!"></message-box>
如果您需要更多的定制选项，例如不同的消息框类型、不同的框架样式等，可以轻松地添加更多的自定义属性 (例如 type 和 style)，并在组件内部处理它们。
如何解决兼容性问题？
Custom Elements API 在尝试自己实现时可能会导致许多兼容性问题。由于它是一个比较新的规范，这些问题更可能出现在旧版浏览器中。以下是一些可能需要注意的事项：
1. IE 不支持 Custom Elements
IE 不支持 Custom Elements，因此需要使用一个叫做 document.registerElement 的类似方法来定义和注册自定义元素。不幸的是，这个方法已经被弃用，并且在未来的浏览器版本中可能会被删除。要解决这个问题，可以使用 Polyfill。
2. 自定义元素需要唯一的名称
自定义元素的名称必须唯一。确保不要多次注册相同的名称，否则可能导致不可预测的行为。
3. 可以定义自定义元素的属性
自定义元素可以定义属性，这些属性在组件内定义的时候会变成自定义元素的属性。这些属性可以使用 getAttribute() 函数访问。这使得组件容易参数化，并可以通过 HTML 属性进行传递。
4. 元素的CSS不能影响其 Shadow DOM
元素的CSS可能会影响其 Shadow DOM。在定义自定义元素内部的样式时，需要注意来自外部 CSS 的样式覆盖的问题。
5. 引用和删除自定义元素
引用自定义元素时，使用 document.createElement()，而不是直接引用定义时的字符串。这样做可以确保浏览器已经完全加载此元素。在移除自定义元素时，使用 remove() 函数，而不是 parentNode.removeChild() 函数。
结论
Custom Elements 提供了一种灵活的方式来扩展现有的 DOM 标记，使开发者能够构建可重用的自定义 UI 控件。但是，它仍处于快速发展的阶段，因此需要注意不同的浏览器之间的差异。这个例子展示了如何创建一个基于 Custom Elements 的自定义消息框组件，并提出了一些潜在的浏览器兼容问题和解决方案。这是我们对 Web Components 的一个简要介绍，希望能对您有所启发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/672ea2cdeedcc8a97c8a51cc