How do I style the last slotted element in a web component
For long answer on ::slotted see: ::slotted CSS selector for nested children in shadowDOM slot
From the docs: https://developer.mozilla.org/en-US/docs/Web/CSS/::slotted
::slotted( <compound-selector-list> )
The pseudo selector goes inside the brackets: ::slotted(*:last-child)
Note: :slotted(...) takes a simple selector
See (very) long read: ::slotted CSS selector for nested children in shadowDOM slot
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 playground: https://jsfiddle.net/CustomElementsExamples/whtjen3k/
More SLOT related answers can be found with StackOverflow Search: Custom Elements SLOTs