0

有一个 lit 元素container-element具有嵌套的 lit 元素gmail-item。

您如何将样式应用于嵌套元素以使最后一个gmail-item具有border-none？

目前，样式li:last-of-type不会传播到包含li.

      @container-element
  
      li:last-of-type {
        border-bottom: none;
      }

      <gmail-item></gmail-item>
      <gmail-item></gmail-item>
      <gmail-item></gmail-item>
      <gmail-item></gmail-item>
      <gmail-item></gmail-item>

@gmail-item

li {
 border-bottom: 1px solid black;
}


<li>I am gmail item</li>

编辑：

尝试了以下。

      <style>
        gmail-item::slotted(li) {
          border: 1px solid orange;
        }
        gmail-item li {
          border: 1px solid orange;
        }
        li {
          border: 1px solid orange;
        }
      </style>
      <gmail-item></gmail-item>
           ........

但不幸的是，它们都没有将样式应用于li内部gmail-item。

我也尝试添加createRendeRoot，但这删除了里面的所有样式gmail-item。

@gmail-item

createRenderRoot() {
return this;
}

也试过设置li border-bottom to inherit。

4

1 回答 1

0

你最好的选择是css变量。它是一个标准，它是有范围的。

.container-1 {
  --my-status: grey;
}

.container-2 > gmail-item:first-child {
  --my-status: orange;
}
<script type="module">
import {
  LitElement,
  html,
  css
} from "https://unpkg.com/lit-element/lit-element.js?module";

class MyContainer extends LitElement {
  static get styles() {
    return css`
      .wrapper {
        min-height: 100px;
        min-width: 50%;
        margin: 5em;
        padding: 10px;
        background-color: lightblue;
      }
    `;
  }

  render() {
    return html`
      <div class="wrapper">
        <slot></slot>
      </div>
    `;
  }
}

class GmailItem extends LitElement {
  static get styles() {
    return css`
      .status {
        margin: 1em;
        border: 2px solid white;
        background-color: var(--my-status, red);
      }
    `;
  }

  render() {
    return html`
      <div class="status">STATUS</div>
    `;
  }
}

customElements.define("my-container", MyContainer);
customElements.define("gmail-item", GmailItem);
</script>

<my-container class="container-1">
  <gmail-item></gmail-item>
  <gmail-item></gmail-item>
</my-container>

<my-container class="container-2">
    <gmail-item></gmail-item>
    <gmail-item style="--my-status: magenta"></gmail-item>
</my-container>

于 2022-01-12T09:27:35.567 回答