[w3c/webcomponents] Style ::slotted children (#594)

Hey,

as it is explained here: https://developers.google.com/web/fundamentals/getting-started/primers/shadowdom#stylinglightdom you can only select a direct item within the `slot`.

So if this is in our `slot`

```html
<name-badge>
  <h2>Eric Bidelman</h2>
  <span class="title">
    Digital Jedi, <span class="company">Google</span>
  </span>
</name-badge>
```

There is no way of styling `.company`. I understand that the idea is that slotted content may be anything and is added by the user and this should be styled by the user.

However, I am running into issues with this. I am adding stuff to the slot from within my `connectedCallback` because I am building form elements. This means I need to add a checkbox into the slot so its in the same dom as the form in which the user puts this element.

My desired html would be like this:

```html
<label>
    <input type="checkbox" name="test" style="opacity: 0;" />
    <div class="material-toggle__switch">
        <div class="material-toggle__knob"></div>
    </div>
    <div class="material-toggle__label">${this.innerHTML}</div>
</label>
```

However I want to style `.material-toggle__switch` and `.material-toggle__knob` depending on the `:checked` state f the input. This is not possible as `label` is the only element I can reach with `::slotted`.

The only solution is to listen for a `change` event and add an active class to `.material-toggle__switch` with this html:

```html
          <slot></slot>
          <div class="material-toggle__switch">
              <div class="material-toggle__knob"></div>
          </div>
```

While it works, it feels very inconvenient. Am I doing it wrong, or is there a way to improve this?

-- 
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
https://github.com/w3c/webcomponents/issues/594