lit：如何将样式应用于嵌套模板？

Question

有一个 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>
           ........

但不幸的是 none 将样式应用于 gmail-item 内的 li。

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

@gmail-item

createRenderRoot() {
return this;
}

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

Answer 1

最好的选择是 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>

lit：如何将样式应用于嵌套模板？

lit: how to apply style to nested template?

html

web-component

lit-element

lit-html

lit