如何无需包裹元素即可向Custom Element的Slot传入多个元素？

这个问题我之前也碰到过——多余的包裹div确实容易搞乱样式，尤其是当你的CSS依赖直接子元素选择器的时候。好在原生Web Components的slot机制本身就支持直接给多个元素分配到同一个命名slot，不需要外层容器！

正确的实现方式 #

你不需要用div或者template包裹，直接给每个需要放入对应slot的元素添加slot属性就行。修改后的使用代码如下：

<my-custom-element>
  <!-- 直接给header区域的元素加slot="header" -->
  <h1 slot="header">Title</h1>
  <p slot="header">Description</p>

  <!-- 同理处理body区域 -->
  <h2 slot="body">Body content</h2>
  <p slot="body">Body content</p>
  <p slot="body">Body content</p>

  <!-- footer区域也一样 -->
  <p slot="footer">Copyright 2018</p>
  <ul slot="footer">
    <li>Facebook</li>
    <li>Twitter</li>
    <li>Instagram</li>
  </ul>
</my-custom-element>

最终的DOM结构 #

这样处理后，自定义元素渲染出来的DOM结构会完全符合你的预期，没有多余的包裹层：

<my-custom-element>
  <header>
    <h1 slot="header">Title</h1>
    <p slot="header">Description</p>
  </header>
  <h2 slot="body">Body content</h2>
  <p slot="body">Body content</p>
  <p slot="body">Body content</p>
  <footer>
    <p slot="footer">Copyright 2018</p>
    <ul slot="footer">
      <li>Facebook</li>
      <li>Twitter</li>
      <li>Instagram</li>
    </ul>
  </footer>
</my-custom-element>

额外提示：避免自定义元素升级前的内容闪烁 #

如果担心在自定义元素完成升级前，这些slot元素会先显示出来，可以用CSS隐藏未被定义的自定义元素内部的slot内容：

/* 自定义元素未升级时隐藏所有slot元素 */
my-custom-element:not(:defined) [slot] {
  display: none;
}

内容的提问来源于stack exchange，提问作者powerbuoy