I have this unique custom element structure:
<my-custom-form>
#shadow-root
<style>
:host label {
color: red;
}
</style>
<div id="wrapper">
<slot name="form-label"></slot>
...
</div>
</my-custom-form>
Utilizing it in the following way:
<my-custom-form>
<label slot="form-label">Custom Label</label>
</my-custom-form>
Expectation was for the label to be styled with red text. However, it did not work.
Is the <label> element actually a direct child of :host in the light DOM?