How can I target the shadow DOM host element only if it s the last child

Question

With the help of code, can you tell me How I can target the shadow DOM host element only if it’s the last child?

Answer 1

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>