Skip to content

Instantly share code, notes, and snippets.

@muan
Last active April 29, 2019 12:55
Show Gist options
  • Save muan/80ec131db2eef3e1ff43bcc4d760438d to your computer and use it in GitHub Desktop.
Save muan/80ec131db2eef3e1ff43bcc4d760438d to your computer and use it in GitHub Desktop.
Web Components F2F Spring 2019

General philosophy

  • Features are built without JS first
  • Progressive enhancement Consider elements' relationship to the DOM
    • Minimum HTML generation
    • Leave styling to CSS classes
    • Create all necessary markup in the HTML document
    • Rely on native elements as much as possible (not reimplementing what native elements already know how to do)
  • Not using frameworks
  • Not using Shadow DOM
    • Non-polyfillable (ShadyDOM had serious performance impact)
    • Can't be progressively enhanced (hidden DOM generation)
    • No need (yet)
  • Elements are designed mimicking native elements

List of GitHub's Custom Elements

  1. <local-time> and friends
  2. <include-fragment>
  3. <poll-include-fragment> (internal)
  4. <g-emoji>
  5. <image-crop>
  6. <details-dialog>
  7. <details-menu>
  8. <clipboard-copy>
  9. <auto-complete>
  10. <auto-check>
  11. <markdown-toolbar>
  12. <task-lists>
  13. <tab-container>
  14. <filterable-input> (experimental)
  15. <file-attachement> (experimental)
  16. <fuzzy-list> (experimental)

Timeline

  • 2014: v0 custom elements
  • 2017: v1 adoption
  • 2018~: bunch of new elements

Things we care about

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment