Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Discuss how to enable platform-dependent appearance #6

Open
tkent-google opened this issue May 10, 2019 · 1 comment
Open

Discuss how to enable platform-dependent appearance #6

tkent-google opened this issue May 10, 2019 · 1 comment

Comments

@tkent-google
Copy link
Owner

<std-switch> will have a platform-independent appearance by default. We should provide an easy way to enable platform-dependent appearance.
@tkent-google
Copy link
Owner Author

tkent-google commented Jun 7, 2019 •
edited
Loading

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)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@tkent-google