Discuss how to enable platform-dependent appearance

Options:

A) CSS custom property; e.g. :root { --std-control-theme: match-platform; }
- Problem: It's difficult to detect CSS value changes in a custom element implementation.
- Problem: Unable to get the computed property value until the element is connected.
- Problem: Needs to compute style twice; One for the custom property, another for platform-dependent style
B) appearance CSS property; e.g. std-switch { appearance: auto; }
- Problem: Same as CSS custom property
C) Global flag manipulated from user JavaScript; foo.controlTheme = 'match-platform'; foo.platformMatchedTheme = true;
- Problem: Can't apply to only a subtree on the page
D) Feature Policy; e.g. Feature-Policy: platform-neutral-theme none Feature-Policy: platform-matched-theme *
- Problem: Can't apply to only a subtree on the page
- Problem: Difficult to test with file:/// pages.
- Problem: Unable to adopt a specific theme.
E) Provide as a stylesheet, either CDN-hosted or provided with the browser
e.g. <link rel="stylesheet" href="https://googlecdn.com/current-platform.css">
e.g.<link rel="stylesheet" href="std:form-controls/platform-styles">
- Problem: The latter needs extra standardization effort.
- Problem: Can't apply to only a subtree on the page
- Problem: A CDN server needs to sniff User-Agent header
F) HTML attribute; e.g. <body theme="match-platform"><std-switch> <div platformmatchedtheme><std-switch>
- Problem: Need a new global attribute, which affects all elements
- Problem: It's hard for custom elements to detect the attribute value change on ancestor elements. Need a new lifecycle callback like themeChangedCallback?

We implemented the first option in the prototype. Because of the first problem, elements don't change their appearance even if --std-control-theme property is changed. We need to disconnect and connect elements from the document tree to apply new theme.

(Edited to drop specific theme names)

tkent-google / std-switch

Discuss how to enable platform-dependent appearance #6