你的前端框架要被 Web 组件取代了(8)
除了能够通过 CSS 变量设置 Web Components 的内部样式之外，还可以将 HTML 注入 Web Components。
通过 Slot 组合组合（Composition）是将 Shadow DOM 树与用户提供的标记组合在一起的过程。这是通过<slot>元素完成的，该元素本质上是 Shadow DOM 中的占位符，其中呈现用户提供的标记。用户提供的标记称为 Light DOM。组合会将 Light DOM 和 Shadow DOM 组成一个新的 DOM 树。
例如，你可以创建<image-gallery>组件并提供标准的<img>标签作为要呈现的组件的内容：
<image-gallery> <img src="foo.jpg" slot="image"> <img src="b.arjpg" slot="image"></image-gallery>
该组件现在将使用给定的两张图像并使用 Slot 在组件的 Shadow DOM 内呈现它们。注意图像上的 slot =“image”属性。它告诉组件应该在其 Shadow DOM 中的什么位置呈现它们。例如，它可能如下所示：
<div id="container"> <div class="images"> <slot name="image"></slot> </div></div>
当 Light DOM 中的节点已经分布到元素的 Shadow DOM 中时，生成的 DOM 树将如下所示：
<div id="container"> <div class="images"> <slot name="image"> <img src="foo.jpg" slot="image"> <img src="bar.jpg" slot="image"> </slot> </div></div>
如你所见，任何具有 slot 属性的用户提供的元素都将在 slot 元素内呈现，该 slot 元素具有 name 属性，其值与 slot 属性的值相对应。
简单的<select>元素的工作方式与你在 Chrome 开发工具中检查时的效果完全相同（当你选择了显示用户代理 Shadow DOM 时，参见上文）：
通过 Slot 组合组合（Composition）是将 Shadow DOM 树与用户提供的标记组合在一起的过程。这是通过<slot>元素完成的，该元素本质上是 Shadow DOM 中的占位符，其中呈现用户提供的标记。用户提供的标记称为 Light DOM。组合会将 Light DOM 和 Shadow DOM 组成一个新的 DOM 树。
例如，你可以创建<image-gallery>组件并提供标准的<img>标签作为要呈现的组件的内容：
<image-gallery> <img src="foo.jpg" slot="image"> <img src="b.arjpg" slot="image"></image-gallery>
该组件现在将使用给定的两张图像并使用 Slot 在组件的 Shadow DOM 内呈现它们。注意图像上的 slot =“image”属性。它告诉组件应该在其 Shadow DOM 中的什么位置呈现它们。例如，它可能如下所示：
<div id="container"> <div class="images"> <slot name="image"></slot> </div></div>
当 Light DOM 中的节点已经分布到元素的 Shadow DOM 中时，生成的 DOM 树将如下所示：
<div id="container"> <div class="images"> <slot name="image"> <img src="foo.jpg" slot="image"> <img src="bar.jpg" slot="image"> </slot> </div></div>
如你所见，任何具有 slot 属性的用户提供的元素都将在 slot 元素内呈现，该 slot 元素具有 name 属性，其值与 slot 属性的值相对应。
简单的<select>元素的工作方式与你在 Chrome 开发工具中检查时的效果完全相同（当你选择了显示用户代理 Shadow DOM 时，参见上文）：
当你被下了药sans的反应