什么是 Custom Elements？
Custom Elements 是 Web Components 规范的一部分，它允许开发者定义自己的 HTML 元素，并且可以添加自定义行为和样式。通过 Custom Elements，我们可以将重复使用的 HTML、CSS、JS 封装成一个自定义元素，方便在多个页面中复用。
什么是服务端渲染？
服务端渲染（Server-side Rendering，简称 SSR）是指在服务端将 HTML 模板和数据结合起来渲染成最终的 HTML，然后将最终的 HTML 发送给客户端。相比于传统的客户端渲染，SSR 可以提升页面的首屏加载速度和 SEO 优化效果。
Custom Elements 与服务端渲染的结合
在传统的服务端渲染中，我们通常使用模板引擎来渲染 HTML。但是随着 Web 应用的复杂度增加，模板引擎的使用变得不够灵活，我们需要更加灵活的方式来实现服务端渲染。
Custom Elements 提供了一个很好的解决方案。我们可以在服务端使用 JavaScript 构建自定义元素，并将其插入到 HTML 中。这样，我们就可以在服务端渲染时使用自定义元素，实现更加灵活的页面渲染。
下面是一个简单的示例代码，演示了如何在服务端渲染时使用 Custom Elements：
// javascriptcn.com 代码示例
const express = require('express');
const app = express();
class MyElement extends HTMLElement {
connectedCallback() {
this.innerHTML = 'Hello, world!';
}
}
customElements.define('my-element', MyElement);
app.get('/', (req, res) => {
const html = `
<html>
<head>
<title>My Page</title>
</head>
<body>
<my-element></my-element>
</body>
</html>
`;
res.send(html);
});
app.listen(3000, () => {
console.log('Server started on port 3000');
});在上面的示例中，我们定义了一个名为 MyElement 的自定义元素，并将其插入到了 HTML 中。在服务端渲染时，我们可以直接将 HTML 字符串发送给客户端，无需使用模板引擎。
Custom Elements 与客户端渲染的结合
除了服务端渲染，Custom Elements 还可以与客户端渲染结合使用。我们可以在客户端通过 JavaScript 动态插入自定义元素，并添加自定义行为和样式。
下面是一个简单的示例代码，演示了如何在客户端使用 Custom Elements：
// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
<my-element></my-element>
<script>
class MyElement extends HTMLElement {
connectedCallback() {
this.innerHTML = 'Hello, world!';
}
}
customElements.define('my-element', MyElement);
</script>
</body>
</html>在上面的示例中，我们通过 JavaScript 动态定义了一个名为 MyElement 的自定义元素，并将其插入到了 HTML 中。在客户端渲染时，我们可以通过 JavaScript 控制自定义元素的行为和样式。
总结
Custom Elements 是 Web 组件规范的一部分，它可以帮助我们封装重复使用的 HTML、CSS、JS，并提供更加灵活的页面渲染方式。与服务端渲染结合使用，可以提升页面的首屏加载速度和 SEO 优化效果；与客户端渲染结合使用，可以实现更加灵活的页面交互效果。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/656e868fd2f5e1655d6b0a43