0

我正在使用 LitElement.js 中的 Web 组件构建一个 Web 应用程序。我有一个包含大多数组件（我们称之为.top）的 div，它指定了网格布局和背景图像。在 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>`
    }
}
4

0 回答 0