如何设置 Web 组件中最后一个开槽元素的样式

Question

我有一个 Web 组件，它的模板如下所示......

<template>
  <div class="jrg-app-header">
    <slot name="jrg-app-header-1"></slot>
    <slot name="jrg-app-header-2"></slot>
    <slot name="jrg-app-header-3"></slot>
  </div>
</template>

我基本上是想将最后一个插槽的内容设置为flex:1;时尚。有 CSS 查询可以做到这一点吗？我尝试了一些清单

::slotted(*):last-child{
  flex:1;
}

但这没有用。如何设置最后一个开槽对象的样式？

Answer 1

有关 ::slotted 的长答案请参阅：:: slotted CSS 选择器用于在 ShadowDOM 插槽中嵌套子项

来自文档：https ://developer.mozilla.org/en-US/docs/Web/CSS/::slotted

::slotted( <化合物选择器列表> )

伪选择器位于括号内：:: slotted(*:last-child)

注意：:slotted(...)采用一个简单的选择器请
参阅（非常）长的阅读：:: slotted CSS 选择器用于shadowDOM 插槽中的嵌套子项

customElements.define('my-table', class extends HTMLElement {
    constructor() {
      let template = (name) => document.getElementById(name)
                                       .content.cloneNode(true);
      super()
       .attachShadow({ mode: 'open' })  
       .append(  template(this.nodeName)  );
    }
  })

<template id="MY-TABLE">
  <style>
    :host { display: flex; padding:1em }
    ::slotted(*:first-child)   { background: green }
    ::slotted(div:last-child)    { background: yellow; flex:1 }
    ::slotted(*:first-of-type) { border: 2px solid red }
    ::slotted(*:last-of-type)  { border: 2px dashed red }
  </style>
  <slot name="column"></slot>
  <slot></slot>
</template>

<my-table>
  <div slot="column">Alpha</div>
  <div slot="column">Bravo</div>
  <div slot="column">Charlie</div>
  <div>Default slot</div>
</my-table>
<my-table>
  <div slot="column">Delta</div>
  <div slot="column">Echo</div>
  <div>Default slot</div>
</my-table>

JSFiddle 游乐场： https://jsfiddle.net/WebComponents/108ey7b2/

更多与 SLOT 相关的答案可以通过 StackOverflow 搜索找到：自定义元素 SLOT