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

For `customElements` in particular, why not allow for the defining of a custom stylesheet map, such that 
```javascript
customElements.defineStyles('some-map-key', CSSStyleSheet | string | href?);
```
would set up a map of styles that would only apply to a custom element that somehow references that map key? I can see that going one of two ways:
```javascript
class MyElementConstructor extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({
      mode: 'open',
      styles: ['some-map-key', 'some-other-key']
    });
  }

  /* omitted */
}
``` 
or 
```javascript
customElements.define('my-element', MyElementConstructor, { 
  styles: ['some-map-key', 'some-other-key']
});
```

Thus that any styles attached to 'some-map-key' or 'some-other-key' would be added only to this element, but not the surrounding window. I can see how someone might argue this would break encapsulation, but would allow browsers to optimize rendering without bleeding into the global CSS scope.

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