Web Components F2F Spring 2019

wc.md

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

• Scoped CustomElementRegistry
• Server side rendering
• Template instantiation (litHTML)
• Form participation / form associated elements (<auto-complete>, <image-crop>, <details-menu>)
• Custom element callback/promise for "connected and parsed"
• Mechanism for setting the tabindex focus flag without sprouting tabindex attribute
• Add element reflection counterparts to id-reference counterparts
• Custom pseudo-classes for host elements via shadow roots (:state)