To target the shadow DOM host element only if it’s the last child in its parent element, you need to use the :host selector along with the :last-child pseudo-class.
Example:
:host(:last-child) {
background-color: lightblue;
}
HTML Structure:
<div>
<custom-element></custom-element>
<custom-element></custom-element>
<custom-element></custom-element> <!-- Shadow DOM host -->
</div>
Shadow DOM Content in the custom-element:
<style>
:host(:last-child) {
border: 2px solid red;
}
</style>