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

@rakina, is there any way for these approaches to maintain the reference to the stylesheet? With some of the discussions going on in the constructible style sheets proposal, newing up a `CSSStyleSheet` would not have any styles associated with it whereas doing something like `CSSStyleSheet.createFromString` would return a `Promise<CSSStyleSheet>`.

In order to allow for custom elements to be defined and not blocked by stylesheet parsing (the reason `new CSSStyleSheet` cannot take an argument, we could potentially add an instance method that would parse and apply rules after the sheet's creation:

```javascript
const sheet = new CSSStyleSheet();
sheet.addRules(` :host { color: rebeccapurple; } `).then(sheet => {
  console.log('success', sheet);
});
customElements.define('some-el', SomeEl, { style: sheet });
```
Such that `sheet` could be defined synchronously, but the styles parsed and applied asynchronously so that the custom element could be defined in a synchronous context. Otherwise styles applied to custom elements would need to be using the stylesheet hack defined above or async (which would make things very complicated if some sort of constructible stylesheet composition is introduced).

-- 
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#issuecomment-396653063