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

I think I mostly agree with @trusktr here. @keanulee pointed out in a meeting the other day that this is the first feature to bind the Custom Elements and Shadow DOM specs together. After thinking about that comment, I don't think this feature is related to custom elements in general. Particularly, it seems strange that this needs to be an extra argument to `customElements.define`. If this was an API available on elements in general, then users could just use it in their custom element definition's constructor to achieve the same effect without causing these two pieces of the spec to become tightly coupled.

Consider if there were an `Element.prototype.shadowStyles` property, which was an (initially empty) array where you could put `CSSStyleSheet`s:

```javascript
class MyElement extends HTMLElement {
  constructor() {
    this.shadowStyles.push(new CSSStyleSheet(`:host{ border: 1px solid black; }`));
  }
}
customElements.define('my-element', MyElement);
```

This way, you could use it on all elements, Custom Elements and Shadow DOM stay separate, and you could even potentially reorder them. [1]

If there's initial concern around this being an array, then maybe `push` could throw if the list size is already >=1 (i.e. maybe this needs to be an array-like "`ElementShadowStyles`" thing) and we could allow it not to throw after those concerns were handled?

[1]: I'm expecting an implementor in this thread to say that reordering would be expensive, but I suspect it would both be unlikely in practice and authors could be easily educated about it since it's effectively the same as moving your stylesheets around if they were actually in the tree. (Authors don't exactly expect that to be cheap, do they?) Additionally, if this were actually some custom object and not just an array, we could prevent reordering altogether and only allow pushing.

-- 
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-371300229