Как я могу поместить элементы с прорезями в сетку CSS?

Question

Мой HTML выглядит следующим образом:

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

Я отформатировал вышеупомянутое с помощью CSS следующим образом:

#grid-container {
  display: grid;
}

Однако элементы, которые я заполнил в слот, кажутсяне работает.Я проверил с помощью инструмента разработчика и выяснил, что элементы с прорезями не рассматриваются как элементы сетки.

Можно ли рассматривать элементы с прорезями так же, как обычные дочерние узлы?Спасибо.

Answer 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>