Nested components, slot and text styling

Description

Who wants the functionality Some front developer working for an agency in France and who is really enthousiastic about Lit 🙌
What it is they want I want to easily override the style of a children component's slot from its parent. The slotted(*) selector can help for that. But not when the slot element is directly a text and not a tag.
Why they want it I want to make my component straightforward for other developpers.
```

<my-button>Click !</my-button>
```

Click !


- Task
Maybe one of the following ideas:
  - modify `::slotted(*)` to style raw string
  - update css selectors to use the name of the web-component (exemple: `simple-text { color: crimson }` )
  - create a new selector for that or accept something like `::slotted(:root)` (or `:default`, `:current`, …)

## Acceptance criteria

`"bloody"` should be **crimson** and not **pink** :

```html
<!DOCTYPE html>
<body>
  <simple-button>
    bloody
  </simple-button>
</body>

import {html, css, LitElement} from 'lit';
import {customElement, property} from 'lit/decorators.js';

@customElement('simple-text')
export class Child extends LitElement {
  static styles = css`p { color: pink ; font-weight: bold  }`;

  render() {
    return html`<p><slot></slot></p>`;
  }
}

@customElement('simple-button')
export class Parent extends LitElement {
  static styles = css`button { color: blue } ::slotted(*) {color: crimson}`;

  render() {
    return html`<button>Hello <simple-text><slot></slot></simple-text> button!</button>`;
  }
}

lit / lit-element

Nested components, slot and text styling #1198

Description