Web Components详解-HTML Templates

前言

在前面Web Components系列文章的插槽中，我们使用直接在body中写入html标签的形式来承载shadowDOM中的元素，这么做会使标签在DOM多渲染一次，不仅降低了性能，还使标签直接暴露在页面中，遵循组件的可重用性、隔离性和封装性，Web Components提供了一种模板标签：template。它可以在DOM文档中定义模板，然后可以通过JavaScript动态地填充和显示这些模板，达到html组件封装的效果。

为什么使用模版

组件化：开发人员可以将页面的不同部分封装为独立的组件，使得代码更加模块化、可维护性更强。
可重用性：开发者可以定义一次模板，然后在多个地方重复使用它，而不必每次都编写相同的HTML和样式代码。
隔离性：每个模版标签都拥有其自己的作用域，这意味着在一个模板中定义的样式和变量不会影响其他模板或全局作用域，有助于避免命名冲突和其他不必要的影响。
封装性：通过模版我们可以封装和隐藏组件的内部细节。外部代码只需要与模板中的公开接口交互，而不需要关心内部实现。
提升性能：使用模板可以避免在页面加载时立即生成复杂的DOM结构，从而提高初始加载性能。模板可以在需要时才填充和渲染，减少不必要的资源消耗。

聊点题外的：DocumentFragment（可跳过）

在之前的一篇实现mini-vue的文章中，我们使用了标签碎片这个api，了解到通过fragment创建的DOM节点不会直接渲染在真实的DOM中，这点与templates标签类似。

DocumentFragment是什么？它是一个轻量级的虚拟DOM容器，通过它可以在内存中创建和操作DOM元素，而不会影响外层的真实DOM。

使用DocumentFragment有什么好处？当我们在真实DOM中频繁的操作真实DOM的属性或者样式时，会使DOM不断的回流重绘，十分影响网页性能。此时DocumentFragment就显得十分重要了，通过fragment我们可以将对DOM的频繁操作在虚拟DOM中进行，最后再将结果一次性放置真实DOM中，提高性能和效率

更多的知识点在后续可能会写篇文章深入了解，关于DocumentFragment就先讲这么多，主要目的是为了更好的理解模版标签

模版的用法

言归正传，在真实Dom中通过来定义一个模版，它可以包含html，css和js等等，可以把它当成是一个私有的html页面。

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Templates</title>
</head>

<body>
    <template id="my-template">
        <style>
            /* 样式 */
            div {
                font-size: 20px;
                color: lightcoral;
            }
        </style>
        <div id="content">
            <!-- 内容 -->
        </div>
        <script>
            document.querySelector("#content").textContent = "content"
        </script>
    </template>
</body>

</html>

虽然在html中使用template标签并不会在页面加载时渲染，但是可以在需要时进行动态填充和渲染。

模板操作

通过template.content可以拿到模板标签的DOM内容，接着使用document.importNode或者element.append将模板中的DOM添加到对应的真实DOM中，思考下面的代码

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Templates</title>
</head>

<body>
    <div id="target"></div>
    <template id="my-template">
        <style>
            /* 样式 */
            div {
                font-size: 20px;
                color: lightcoral;
            }
        </style>
        <div id="content">
            <!-- 内容 -->
        </div>
        <script>
            document.querySelector("#content").textContent = "content"
        </script>
    </template>
    <script>
        const temp = document.querySelector("#my-template")
        const target = document.querySelector("#target")
        target.append(temp.content)
    </script>
</body>

</html>

CustomElements+ShadowDOM+HTML Templates解锁完全体

前摇了这么久，终于来到了template的核心用法，结合之前的自定义标签和影子DOM，我们可以解锁进阶用法，或者说前面的标签都是刻意的避开了模板标签的写法，参考下面的代码：

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Templates</title>
</head>

<body>
    <my-custom-element></my-custom-element>
    <template id="my-template">
        <style>
            /* 样式 */
            div {
                font-size: 20px;
                color: lightcoral;
            }
        </style>
        <div id="content">
            <!-- 内容 -->
        </div>
        <script>
            // 脚本
            ele.shadowRoot.querySelector("#content").textContent = "content"
        </script>
    </template>
    <script>
        const temp = document.querySelector("#my-template")
        const elemName = "my-custom-element";
        const ele = document.querySelector(elemName);
        class MyCustomElement extends HTMLElement {
            constructor() {
                super();
                this.attachShadow({ mode: "open" });
                this.shadowRoot.appendChild(temp.content);
            }
        }
        customElements.define(elemName, MyCustomElement);
    </script>
</body>

</html>

可以看到，template中的内容不会直接渲染在DOM中，而是通过影子DOM的方式添加到自定义标签中，它有自己的标签结构及样式，需要注意的是script标签并不会被隔离，它仍然相当于在全局的作用域下。解决方案有两个

使用IIFE：在script中使用立即执行函数来限制标签的作用域，使其只在标签内部生效

html 复制代码

<script>
    (function () {
        const test = "test"// 只在当前作用域下生效
        console.log(test);// test
    })()
</script>

使用module：给script标签加上type="module"的属性，使标签以模块化脚本的形式存在

html 复制代码

<script type="module">
    const test = "test"// 只在当前作用域下生效
    console.log(test);// test
</script>

至此，我们就基于CustomElements+ShadowDOM+HTML Templates完成了一个完整的Web Components组件的实现

写在最后

文章主要介绍了如何使用HTML Templates在Web组件中实现模板的隔离和私有化。文章提供了关于模板的基本用法、操作方法，以及如何结合其他技术来实现高度隔离和封装的组件。

感谢你看到最后，如果觉得文章不错的话，给个三连鼓励一下吧，谢谢！

相关代码：

myCode: 基于js的一些小案例或者项目 - Gitee.com

参考文章：

修改文档（document）

模板元素

浅析MVVM原理，实现一个mini-vue_阿宇的编程之旅的博客-CSDN博客