javascript - 仅当影子 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) 也使它们成为可能全是绿色。

Answer 1

引用我的另一个答案:Use CSS selectors like :first-child inside shadow dom

Your elements remain hidden in lightDOM!
any global style you apply (at any time) will be reflected to shadowDOM

customElements.define('my-custom-element', class extends HTMLElement {
  constructor(){
    super()
      .attachShadow({mode: 'open'})
      .innerHTML = `<slot></slot><style>:host { color: red; }</style>`;
  }
});

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

<style>
   div my-custom-element:last-child {
        padding:    .5em;
        background: green;
   }
</style>

注意事项:

• super()返回“this”(元素本身)，因此您可以在其上链接

• attachShadow 返回 this.shadowRoot , 所以你可以在上面链接

• :host-context您提到的 FireFox 和 Safari 将不支持
  参见::host-context not working as expected in Lit-Element web component

---

---

回复:评论:

This might be the real answer, but this is a bummer, I thought the entire point of the shadow dom was to be self contained, if i have to write some styles in a global stylesheet to then style something in the shadow dom that doesn't seem like a great deal, no wonder people gravitate towards things like react and vue when web standards are so poor.

这样想。如果你的 my-custom-element其中 <p>要素； <p>怎么会知道它在里面 last-child ...仅通过引用其父容器。

no wonder people gravitate towards things like React and Vue when web standards are so poor.

所有框架做的完全一样，它们将东西包装在容器中(无论是常规 DOM、shadowDOM、虚拟 DOM(内存)

更准确地说:Frameworks frame 您在容器中的内容.. 始终

native W3C 标准自定义元素 API 提供100% 的控制权以决定是否使用容器。

是的，这意味着您必须在用餐前编写一些脚本/ cooking 。

您有 100% 的自由来编写组件。

React 将 48 KB (GZipped) 添加到您的下载中，更不用说整个构建过程，更不用说它永远不会与任何其他框架协同工作，更不用说它不会甚至 comply不再使用 ES 标准。

一个额外的自定义元素需要大约 15 分钟，可能需要 200 个字节