你的前端框架要被 Web 组件取代了(9)

它采用用户提供的<option>元素并将它们呈现到下拉菜单中。
具有 name 属性的 Slot 元素称为 named slot，但这一属性并非必需的。它仅用于在特定位置呈现内容。当一个或多个 slot 没有 name 属性时，内容将按照用户提供的顺序在其中呈现。当用户提供的内容少于 slot 数量时，slot 甚至可以提供后备内容。
假设<image-gallery>的 Shadow DOM 看起来像这样：

<div id="container"> <div class="images"> <slot></slot> <slot></slot> <slot> <strong>No image here!</strong> <-- fallback content --> </slot> </div></div>
当再次给定同样的两张图像时，生成的 DOM 树将如下所示：

<div id="container"> <div class="images"> <slot> <img src="foo.jpg"> </slot> <slot> <img src="bar.jpg"> </slot> <slot> <strong>No image here!</strong> </slot> </div></div>
通过 slot 在 Shadow DOM 内部呈现的元素称为分布式节点。在组件的（分布式）Shadow DOM 中呈现之前就应用于这些节点的所有样式也将在分发后得到应用。在 Shadow DOM 中，分布式节点可以通过:: slotted() 选择器获得额外的样式：

::slotted(img) { float: left;}
:: slotted() 可以使用任何有效的 CSS 选择器，但它只能选择顶级节点。例如:: slotted(section img) 就不适用于此内容：

<image-gallery> <section slot="image"> <img src="foo.jpg"> </section></image-gallery>