在过去的几年中，前端技术发生了巨大的变化。现在，前端工程师可以使用一些非常强大的工具和框架来创建应用程序和组件。其中一个最有用的技术是自定义元素。自定义元素允许您创建自己的 HTML 元素，这对于组件化和自定义 Element 的 Web 开发非常有用。结合服务端渲染（SSR）技术，可以加速页面加载时间，同时为用户提供更好的性能和体验。
什么是自定义元素？
自定义元素是指自己定义的 HTML 标记。与常规元素不同，自定义元素可以自定义元素的行为，使其更容易地集成到后端或其他前端代码中。例如，您可能想要创建一个元素，它可以在点击时弹出一个模态对话框。这很容易通过自定义元素实现。
要创建自定义元素，您可以使用 JavaScript 中的 customElements.define() 方法。这使您可以向 DOM 中添加新的自定义元素类型。
class MyElement extends HTMLElement {
connectedCallback() {
this.innerHTML = '<div>Hello World!</div>';
}
}
customElements.define('my-element', MyElement);在上面的示例中，我们定义了一个名为 "my-element" 的新元素。当它被添加到页面中时，它将自动呈现 "Hello World!" 的内容。
什么是服务端渲染？
服务端渲染（SSR）是一种处理技术，它把普通的 HTML 模板变成动态的 HTML 页面。这意味着在每次访问页面时，您将获得一些基于后端的内容，而不是在客户端上使用 JavaScript 处理的结果。这通常意味着页面加载时间更快，同时减轻了客户端的压力。
下面是一个示例，用于使用 Express 和 Handlebars 模板引擎进行服务器端渲染：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- ------ - ------------------------------ ----- --- - ---------- ------------------------ ---------- ------------- -------- -------------- ------------ ----- ---- -- - ------------------- - ------ ----- ----- --- --- ---------------- -- -- - ------------------- --------- -- ---- ------- ---
在上面的代码中，我们使用 Handlebars 模板引擎将 index.handlebars 视图文件呈现为 HTML 页面。需要注意的是，这个页面是在服务器端上渲染的，而不是在客户端上使用 JavaScript 进行处理的。
Custom Elements 与服务器端渲染技术结合
服务端渲染技术结合 Custom Elements 可以加速页面加载时间，并提供更好的用户体验。主要原因是，服务端渲染可以在页面初始加载时直接生成所有 HTML 内容，而不需要等待 JavaScript 文件加载和 DOM 渲染。
您可以将自定义元素用于渲染服务端创建的元素。例如，在您的 HTML 模板中，您可以使用自定义元素标记，如下所示：
-- -------------------- ---- -------
------
------
------------------------
------- ----------------------------------
-------
------
-------------------------
-------
-------当这个页面被服务器端渲染时，<my-element></my-element> 标记将被转换为使用 JavaScript 自定义元素渲染方式生成的 HTML 代码。当客户端接收到这个 HTML 页面时，它将立即渲染，而不必等待 JavaScript 文件的下载和 DOM 变换。
示例代码
下面是一个使用 Custom Elements 和服务器端渲染技术结合的示例代码：
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------------- -
-------------- - ----------- --------------
-
-
----------------------------------- -----------
----- ------- - -------------------
----- ------ - ------------------------------
----- --- - ----------
------------------------ ----------
------------- -------- --------------
------------ ----- ---- -- -
------------------- -
------ ----- -----
---
---
---------------- -- -- -
------------------- --------- -- ---- -------
---index.handlebars:
-- -------------------- ---- -------
------
------
------------------------
------- ----------------------------------
-------
------
-------------------------
-------
-------当您重新加载应用程序时，您将看到 my-element 的自定义元素标记已被立即呈现到页面上，而不需要等待 JavaScript 文件加载和 DOM 渲染。
结论
总的来说，Custom Elements 与服务器端渲染（SSR）技术结合可以大大提高 Web 应用程序的性能。使用 Custom Elements，您可以轻松地自定义和重用您的 HTML 标记，而使用服务器端渲染技术，您可以加快页面加载时间和性能，同时为用户提供更快，更直观的体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67492a4da1ce006354441ad1