Re: [w3c/webcomponents] CSS Modules (#759)

> However, option 3 may come with certain other complications that we would need to contend with. For example, what is the parentStyleSheet and the ownerRule of aSheetFromBSheet/aSheetFromCSheet if they are the same CSSStyleSheet?

Much like `document.currentScript` is set to `null` for modules, `parentStyleSheet` and `ownerRule` can be `null` for CSS modules.

> Is there some concrete improvement in developer experience that option 3 would provide that would tip the scale in its direction?

It think that the equivalence to the behavior to the module loader is important in an of itself. Consider these two ways to load CSS modules `base.css`, `element.css`, into a JS module `element.js`:

## Variant 1: using `@import`

base.css
```css
...
```

element.css:
```css
@import 'base.css';
...
```

element.js:
```js
import styles from './element.css';
class Element1 extends HTMLElement {
  constructor() {
    this.attachShadow().adoptedStyleshets = [styles];
  }
}
```

## Variant 2: direct import into JS

base.css
```css
...
```

element-1.css:
```css
...
```

element.js:
```js
import baseStyles from './base.css';
import elementStyles from './element.css';
class Element1 extends HTMLElement {
  constructor() {
    this.attachShadow().adoptedStyleshets = [baseStyles, elementStyles];
  }
}
```

I think these two should be equivalent in terms of the modules that they instantiate, but if you extend the example to multiple JS modules, you'll get a difference where Variant 1 creates N `CSSStyleSheet` objects for `base.css` and Variant 2 creates only 1.

The difference is user observable if you're trying to dynamically edit styles, like a visual editor might do:

element.js:
```js
import baseStyles from './base.css';
import elementStyles from './element.css';

makeBackgroundDark() {
  baseStyles.cssRules[0].styleMap.set('background-color', 'gray');
}
```

This only has global effect if we choose option 3, otherwise the developer has to avoid `@import`.

Yes, there are better ways to dynamically update a single or few properties, like custom variables, but there are cases where a tool will want to edit CSS, or a theming system will want to replace an entire shared stylesheet.

-- 
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/759#issuecomment-490670571