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

> @rakina, the behaviors of the listed approaches are helpful, but not quite enough to help make a decision. In particular, you list a lot of things that are true for each approach, but we don't know whether they're true or not for the other approach.

I see, sorry! Here's a more detailed version:

  | Fake SR | UA
-- | -- | --
Selectors that work in the CE stylesheet | `:host`, `:host()`, `:host-context()`, and complex selectors starting with `:host`, `:host()`, or `:host-context()` such as `:host > div` | Simple selectors and compound selectors (but only the element itself is ever matched)
`::slotted` still works in shadow stylesheets | Yes | Yes
Changing/updating CE stylesheet | Not possible | Not possible
Styling light DOM descendants using CE stylesheet | Not possible | Not possible
Styling shadow DOM descendants using CE stylesheet | Possible | Not possible
Light DOM descendants style inheritance | Inherit style from ancestor as normal, including the CE stylesheet | Inherit style from ancestor as normal, including the CE stylesheet
Other effects on light DOM descendants | None | None
Other effects on shadow DOM descendants | None | None
Effect of `!important` in CE stylesheet | Overrides author styles applied from the outside, but not user styles | No effect (the `!important` part is ignored, so all rules are treated as normal rules)
Effect on shadowRoot.styleSheets | No effect (doesn't show up in the StyleSheetList) | No effect (doesn't show up in the StyleSheetList)
Effect on document.styleSheets | No effect (doesn't show up in the StyleSheetList) | No effect (doesn't show up in the StyleSheetList)
Effect on element.shadowRoot | No effect | No effect
Precedence order | important UA > important user > **important explicit shadow DOM > important custom element** > important author > normal author > normal user > **normal explicit shadow DOM > normal custom element** > normal UA (note: CE style is treated as the first stylesheet in the element's shadow tree) | important UA > important user > important explicit shadow DOM > important author > normal author > normal user > normal explicit shadow DOM > **important custom element = normal custom element = normal UA**
Origin | Author | User Agent

Example on precedence

**Fake shadow root**
```js
window.customElements.define("test-element", class extends HTMLElement {
  constructor() { 
    super(); 
    var shadowRoot = this.attachShadow({ mode: "open" });
    shadowRoot.innerHTML =  "<style> :host { color: blue } </style>"; 
  }
}, {style: new CSSStyleSheet(":host { color: red; background-color: red; }") });
```
The custom element default style is treated as first stylesheet in corresponding CE's shadow tree, so the element's color should be blue, and background color should be red. 

**UA**
```js
window.customElements.define("test-element", class extends HTMLElement {
  constructor() {
    super();
  }
}, { style: new CSSStyleSheet("test-element { color: red; }")});
```
The element's color should be red. If you attach a shadow root with style element with the rule `:host { color: green; }`, the color of the element will turn green. If you attach a style element in the document tree with the rule `test-element { color: blue; }`, the color of the element will turn blue.



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