Web Components 是一个重要的前端技术，它可以将 HTML、CSS 和 JavaScript 封装成自定义的 HTML 元素，让我们可以利用这些元素快速构建可重用、可维护的组件。在 Web Components 中，一个重要的概念是“ShadowDOM”，即元素的私有 DOM。在每个 ShadowDOM 中，都包含一个默认的内容区域，我们称之为“默认 Content”，本文将详细介绍 Web Components 元素的默认 Content。
ShadowDOM 简介
ShadowDOM 是一个浏览器内置的隔离机制，用来创建 DOM 的私有子树，避免样式和 JavaScript 的冲突。一个 Web Components 元素通过设置 shadowRoot 属性来建立自己的私有 DOM，如下所示：
class MyElement extends HTMLElement {
constructor() {
super();
const shadowRoot = this.attachShadow({ mode: 'open' });
//...
}
}shadowRoot 的 mode 参数可以取值 "open" 或 "closed"，表示是否允许外部访问私有 DOM。
默认 Content 简介
当一个 Web Components 元素的 ShadowDOM 第一次初始化的时候，会创建一个默认的内容区域，默认 Content 会被包含在一个名为"slot"的 HTML 元素中。默认 Content 的大小和位置可以通过 CSS 来控制。
下面是一个示例，定义了一个包含默认 Content 的 Web Components 元素"my-element"：
-- -------------------- ---- -------
------------
--------------
--------------
-------------
--------
----------------------------------- ----- ------- ----------- -
------------- -
--------
----- ------ - ------------------------ ---------
---------------- - -
-------
------------- -
------ ----
-
--------
-----
-------------
------
--
-
---
---------注意，在这个示例中，我们使用“::slotted”伪类来选择默认 Content 中的"h1"标签，并应用属性"color: red"。
默认 Content 的用途
默认 Content 是 Web Components 中十分有用的一个概念，它让我们可以定义一个元素的默认 HTML 内容，同时又不影响使用者替换这个内容。这种灵活性可以让组件变得更加可重用和可配置。
例如，我们可以定义一个名为"my-modal"的 Web Components 模态框，其中默认 Content 是一个按钮，只有当按钮被点击时才弹出模态框。这样一来，我们就能够让使用者配置按钮的大小、颜色和文本，从而实现更好的可定制性。
总结
Web Components 是现代 Web 开发中的重要技术，ShadowDOM 和默认 Content 提供了组件化开发的基础，让我们可以更加简便地构建可重用、可维护的组件。掌握 Web Components 的核心概念是前端工程师必备的技能之一，希望本文能对大家有所帮助。
示例代码
本文使用了上面的"my-element"示例，这里再次展示出来：
-- -------------------- ---- -------
------------
--------------
--------------
-------------
--------
----------------------------------- ----- ------- ----------- -
------------- -
--------
----- ------ - ------------------------ ---------
---------------- - -
-------
------------- -
------ ----
-
--------
-----
-------------
------
--
-
---
---------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/654e31e77d4982a6eb774c39