如何设置 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 的详细回答，请参阅：

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

::slotted( <compound-selector-list> )

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

注意：:slotted(...) 采用简单选择器
请参阅（非常）长读：

  customElements.define('my-table', class extends HTMLElement {
    constructor() {
      let template = document.cloneNode(document.querySelector('#t1').content, true);
      super()
       .attachShadow({ mode: 'open' })  
       .append(template);
    }
  })

<template id="t1">
  <style>
    :host {
      display: flex;
      padding:1em;
    }
    ::slotted(*:first-child) {
      background: green;
    }
    ::slotted(*: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>
</template>

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

JSFiddle 操场：https://jsfiddle.net/CustomElementsExamples/whtjen3k/

更多与 SLOT 相关的答案可以通过 Whosebug 搜索找到：Custom Elements SLOTs

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

How do I style the last slotted element in a web component

css

web-component