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

I am wondering how we can have more simpler approach to address the original use case.

I have a concern that "using a fake shadow root and use :host pseudo class" is a kind of complex, from the implementor's perspective. It might be difficult to implement it *as a lightweight mechanism* . It's unclear to me.

How about having more simpler approach?

## Simple Custom UA style

1. `customElements.define` will take optional `uastyle` style.
```js
const uastyle = new CSSStyleSheet('...');
customElements.define("cool-element", CoolElement, { uastyle: uastyle });
```

2. In a custom UA style, we allow only a [compound selector](https://drafts.csswg.org/selectors/#compound). Rules which are using [complex selector](https://drafts.csswg.org/selectors/#complex) should be ignored.

3. In addition to that, we allow only [universal selector](https://drafts.csswg.org/selectors/#universal-selector). We don't allow any concrete [type (tagname) selector](https://drafts.csswg.org/selectors/#type-selectors).

## Example

The following are okay because these are compound selector which use only universal selector.
```css
* {
  color: red
}

.foo {
  color: red
}
```
The rules match `<cool-element>` and `<cool-element class=foo>`, respectively.


The followings custom UA style are simply ignored:
```css
* > b {   // this is a composed selector. Ignore this.
  color: red
}

div {  // This is a tag name selector. Ignore this.
  color: red
}


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