自定义元素 + Shadow Dom - 为命名槽的最后一个子元素设置样式

Question

我正在尝试将样式应用于指定插槽的最后一个子级，并且正在努力获取正确的选择器。

本质上，

last-child

似乎适用于light DOM，而不是shadow DOM，因此无论它位于哪个槽中，都会选择最后一个槽元素，考虑到选择器的范围，这可能有效也可能无效.

这里的工作小提琴演示了这一点：https://jsfiddle.net/w8rLghs7/29/

Answer 1

最具可读性的是将 DIV 菜单项包装在容器中

#lefties

• 您主要在 lightDOM 中设置插槽样式，而不是在 ShadowDOM

  中

• ::slotted

  不采用复杂的选择器；
  请参阅很长的文章： ::slotted CSS 选择器用于在 ShadowDOM 插槽中嵌套子项

<style>
  #lefties div:last-child {
    background-color: lime;
  }
</style>

<my-element>
  <div id="lefties">
    <div slot=left>Menu 1</div>
    <div slot=left>Menu 2</div>
    <div slot=left>Menu 3</div>
  </div>
  <div>Main</div>
</my-element>

<script>
  customElements.define("my-element", class extends HTMLElement {
    constructor() {
      super().attachShadow({mode: 'open'})
             .innerHTML = `<slot name='left'></slot><slot></slot>`
    }
  })
</script>