如何将开槽元素放入 CSS 网格中？答案

【问题标题】：How can I place slotted elements into css grid?如何将开槽元素放入 CSS 网格中？
【发布时间】：2018-11-28 11:09:56
【问题描述】：

我的 HTML 是这样的：

<div id="grid-container">
    <slot name="items-to-be-filled"></slot>
</div>

我已经用这样的 CSS 格式化了上面的内容：

#grid-container {
  display: grid;
}

但是，我填充到插槽中的项目似乎有问题。我使用开发人员的工具进行了检查，发现插槽项没有被视为网格项。

是否可以像普通的子节点一样对待有槽的项目？谢谢。

【问题讨论】：

请发布足够的代码来重现问题。 stackoverflow.com/help/mcve
@Michael_B，在我的情况下不需要 javascript，只需要普通的 html 和 css。

标签： css css-grid web-component shadow-dom custom-element

【解决方案1】：

Shadow DOM 将外部与互联网 CSS 样式隔离开来。因此，为了有效，CSS 属性 display: grid 应该放在 Shadow DOM 中。

host.attachShadow( { mode: 'open' } )
    .innerHTML = 
       `<style>
          #grid-container { display: grid }
        </style> 
        <div id="grid-container">
          <slot></slot>
        </div>`

<div id="host">
   <span>one</span>
   <span>two</span>
   <span>three</span>
</div>

【讨论】：