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

We are not landing the CLs before the resolution of which approach to use and also because there's still some undecided behaviors. If anybody want to test it, maybe they can have a local build with the patches from the CLs (top right menu on the CL -> download patch).

I'll clarify the behavior of my implementation of both approaches now. 

True for both approaches:

- The default style can't be changed/mutated after it's assigned to the custom element definition (the stylesheet is copied).
- Child selectors can't style light DOM children of the custom element. If we want to support this, I think it's much easier in the UA approach.
- Style inheritance still applies to light DOM children.

[Fake shadow root approach:](https://chromium-review.googlesource.com/c/chromium/src/+/992074)

- Has author origin
- If there is no real shadow root on the custom element
  - The default style is treated as if it's in a fake shadow root, that has nothing inside it and will not slot/remove light DOM children of the custom element.
  - only :host() and :host-context() rules work.
  - The fake shadow root only works for styling the custom element and it's invisible anywhere else.
- If there is a real shadow root on the custom element
  - The default style is treated as if it's the first stylesheet in shadow root
  - Default style does not show up in shadowRoot.styleSheets
  - There is no fake shadow root
  -  ::slotted will work for slotted elements, child selector will match shadow root's child, as normal
- Layout test can be seen [here](https://chromium-review.googlesource.com/c/chromium/src/+/992074/13/third_party/WebKit/LayoutTests/fast/dom/custom/define-with-default-style.html)

Note: I have talked to Rune about this approach, he mentioned a possible issue about this approach is if there is a real shadow root in the custom element, we treat the default style as if it's the first element in the real shadow root, so it has the same origin and scope so there might be specificity issues.

[UA approach:](https://chromium-review.googlesource.com/c/chromium/src/+/1068562)

- Has UA origin
- !important is ignored, declarations with !important are treated as if it doesn't have !important.
- Only applies on the custom element itself
- No complex selector allowed, rules with complex selectors are ignored
- Layout test can be seen [here](https://chromium-review.googlesource.com/c/chromium/src/+/1068562/8/third_party/WebKit/LayoutTests/fast/dom/custom/define-with-default-style.html)


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