Question

我的HTML如下：

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

我已经用CSS格式化了上面的代码：

#grid-container {
  display: grid;
}

但是，我填充到插槽中的物品似乎不正常。我检查了使用开发人员的工具后发现，没有将插入的项目视为网格项目。

是否有可能像普通子节点一样对待带槽物品？谢谢。

Answer 1

Shadow DOM将外部样式与Internet 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>

如何将开槽的元素放入CSS网格？

1 个答案: