仅当阴影DOM主机元素是最后一个子元素时，如何选择它？

Question

我仅在选择影子DOM主机元素时才选择它。

在此示例中，它们都是绿色，除了最后一个，我希望它们都是红色。

class MyCustomElement extends HTMLElement {
  constructor(){
    super();
    this.attachShadow({mode: 'open'});
    this.shadowRoot.innerHTML = `
      <h5>Element:</h5>
      <slot></slot>
      <style>
        :host {
          color: red;
        }
        :host-context(:last-child) {
          color: green;
        }
      </style>
     `;
  }
}
window.customElements.define('my-custom-element', MyCustomElement);

<div>
  <my-custom-element>first</my-cutom-element>
  <my-custom-element>... more elements</my-cutom-element>
  <my-custom-element>last</my-cutom-element>
</div>

这些都是绿色的...我只希望最后一个是绿色的。

我也尝试过:host:last-child，它什么也不做，:host-context(my-custom-element:last-child)也使它们全部变成绿色。

我希望仅当影子DOM主机元素是最后一个子元素时才选择它。在此示例中，它们都是绿色，我希望它们除了最后一个之外都是红色。类MyCustomElement扩展...

Answer 1

从其他答案中提取指针：Use CSS selectors like :first-child inside shadow dom