[w3c/webcomponents] Provide a lightweight mechanism to add styles to a custom element (#468)

**Proposal**

Allow a user to define a set of styles to apply to a custom element as an option to `customElements.define`. Conceptually, providing styles would make the element act as if it had a `shadowRoot` including a `style` element with the provided css. The rules used to target the element would be [the same as](https://www.w3.org/TR/css-scoping-1/) in Shadow DOM.
```
customElements.define("cool-element", CoolElement, {styles: ':host {display: block; }');
```

**Discussion**

To style a custom element that does not otherwise need a `shadowRoot` incurs an unfortunate performance penalty and is cumbersome. A user must create a shadowRoot and put inside it a `style` element and a `slot` element. Providing this styling at define time gives the platform an opportunity to optimize beyond what could be achieved when interpreting user code that installs the shadowRoot, style, and slot at construct/connected time. In addition, because the proposed syntax is less code than the alternative, it would likely reduce concern over https://github.com/w3c/webcomponents/issues/426.

Ideally, developers could include `styles` targeting elements inside Shadow DOM in addition to the element itself. Again, the provided `styles` would act as if they were in a `style` that was the first element inside the `shadowRoot`. This could help address https://github.com/w3c/webcomponents/issues/282 and the feature could be explained as a [constructable stylesheet](http://tabatkins.github.io/specs/construct-stylesheets/) when this feature is added to the platform.



---
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/468