Incorrect compilation of `:host` selectors in scoped Light DOM styles

[Mr-VincentW]

Description

The :host selectors are not correctly compiled for scoped CSS in light DOM components. Here are two examples:

1. Incorrect Replacement of :host

• When using :host in complex selectors, only the first occurrence is replaced with the scoped class name, while subsequent instances remain unchanged.
• Example:

/* A selector like */
:host:has(+ :host:empty) {...}

/* will be compiled to something like */
.lwc-4n1cthejebq-host:has(+ :host:empty) {...}

The second :host should be replaced with .lwc-4n1cthejebq-host but remains unchanged.

2. Missing scope classes from host elements

• The scope classes are missing from host elements.
• Example:

/* A selector like */
:host + :has(.box) {...}

/* will be compiled to something like */
.lwc-4n1cthejebq-host + :has(.box).lwc-4n1cthejebq {...}

<x-box class="lwc-190pm5at4mo lwc-4n1cthejebq-host"><div class="box lwc-4n1cthejebq"></div></x-box>

The added .lwc-4n1cthejebq selector causes issues for sibling styling, as it doesn’t exist on host elements themselves.

Steps to Reproduce

Check the provided playground showcase.

Expected Results

Scoped CSS should:

• Replace all occurrences of :host correctly.
• Correctly applying scope classes to sibling elements, allow styling of sibling instances of the same component from within.

Actual Results

Please refer to the description section as well as the attached playground example.

Browsers Affected

All.

Version

• LWC: "8.16.3"