Как сделать каскад разрыва сетки через теневой объект DOM [LitElements] - PullRequest
Новая
       75

Как сделать каскад разрыва сетки через теневой объект DOM [LitElements]

0 голосов
/ 10 июля 2020

Я создаю веб-приложение, используя веб-компоненты в LitElement. js. У меня есть div, содержащий большинство компонентов (назовем его .top), который определяет макет сетки и фоновое изображение. В div у меня есть настраиваемый компонент (назовите его <custom-container>, который сам состоит из настраиваемых компонентов (вызовите каждый экземпляр <custom-leaf>). Контейнер также использует display: grid и определяет grid-column-gap.

Проблема: между каждыми <custom-leaf>, вложенными в <custom-container>, есть промежуток сетки, однако он невидим: вместо «пробивания» через фоновое изображение отображается фоновое изображение.

Вот это какой-то код:

index.html

<style>
     .top {
         grid-gap: 4px;
         display: grid;
         background-image: url("../img/background.jpg");
    }
</style>
<body>
    <div class="top">
        <custom-container></custom-container>
    </div>
    <script src="customContainer.js"/>
    <script src="customLeaf.js"/>
</body>

customContainer.js

class CustomContainer extends LitElement {
    static get styles() {
        return css`
             :host {
                 display: grid;
                 grid-gap: 4px
             }
        `
    }

    render() {
        return html`<custom-leaf></custom-leaf><custom-leaf></custom-leaf>`
    }
}
...