Web Components 中的 Slot 和 Template
介绍
Web Components 是一种包装在许多网站和网络应用程序中的技术, 被用于创建可重用的自定义元素和组件。其中的 Slot 和 Template 是两个非常重要的概念，本文将对它们进行详细介绍和区别。
Slot
Slot 允许我们把一个元素的内容插入到另一个元素中。Slot 很容易理解为跟插槽（Slot）一样的物品，它容纳并且控制一个单独的 “内容块”，可以用于自定义元素的占位符。
使用 slot 的前置条件我们需要设置shadowDom。shadowDom的基本用法是：
var shadow = element.attachShadow({mode: 'open'});这个方法可以将shadowDom设为open或closed。open可以让你查看shadowDom中的元素，而closed可以隐藏它们。
接下来我们可以使用HTML <slot>元素将标准或自定义元素的内容插入到另一个元素<template>内,下面是一个简单的示例:
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-------
------
---- ------------------
------------------------
----------------
-------------------
---------------
-----------------
------
--------
-- ----- -----------------
----- ------------- ------- ----------- -
------------- -
--------
-- -----------
----- ---------- - ------------------------ ---------
-- ---------------------------
----- -------- - -----------------------------------
------------------ - -
---------------------------------
-------------
--
---------------------------------------------------------
-
-
-- ----------------------------
--------------------------------------- ---------------
---------
-------
-------Template
Template 与 Slot 的不同之处在于它们是被隐藏在DOM树中的，并且不会在有效载荷之前渲染，换句话说，它们是元素节点的占位符。
Template 可以让我们在一组标准元素中存储可重用的 HTML/CSS/JavaScript，然后在需要的时候将它们重新连接到页面。
下面是一个示例：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-------
------
----------------------
--------- -----------------
----------------
-----------
---- ----------------------------
--------
-- -------------------
----- -------- - ---------------------------------------
----- ----------- - --------------------------------------------
----- ------- - ---------------------------------
---------------------------------
---------
-------
-------总结
Slot 与 Template 都是 Web Components 中非常有用的技术，它们可以用于以更灵活的方式实现网站和应用程序的重复使用。通过使用 shadowDom 和 template, 我们可以最大化地控制网站和网络应用程序中的构建成本，并提高代码的可维护性和可扩展性。
参考文献
- [Web Components] (https://developer.mozilla.org/en-US/docs/Web/Web_Components)
- [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)
- [HTML <slot> Tag] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot)
- [HTML <template> Tag] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6496935a48841e98943c32c3