CSS selector `:host > some_child_element` doesn't take effect?

Question

I have this custom element:

<my-custom-form>
  #shadow-root
   <style>
     :host label {
        color: red;
     }
   </style>
   <div id="wrapper">
     <slot name="form-label"></slot>
     ...
   </div>
</my-custom-form>

Now I use it as follows:

<my-custom-form>
    <label slot="form-label">Some Label</label>
</my-custom-form>

I expected that the label should be styled as red color. But it isn't. Isn't <label> element residing in the light DOM as a direct child of :host?

Answer 1

I believe what you're having is issue in syntax,try doing:

• :host( [label] ){ }

here's another answer on SO that will clear your duobt!

• Applying more in depth selection to the :host CSS pseudo class

Documentation reference:

• https://developer.mozilla.org/en-US/docs/Web/CSS/:host()

Answer 2

Slotted content is reflected in shadowDOM, does not become part of shadowDOM.

So styling is done in lightDOM (with global CSS)

:host() only styles the out "skin" in lightDOM

Long detailed explanation: ::slotted CSS selector for nested children in shadowDOM slot