Native Web Components Talk.md

Native Web Components

https://www.webcomponents.org
https://developer.mozilla.org/en-US/docs/Web/Web_Components

• HTML Imports
• <template> Element
  • Useful only in certain circumstances
• Custom Elements
• Shadow DOM

What are Custom Elements?

https://w3c.github.io/webcomponents/spec/custom/

• Ability to extend HTMLElement
  • Requires Classes
• Custom tags & attributes

What is Shadow DOM?

https://w3c.github.io/webcomponents/spec/shadow/

• Like having an iframe per component
• Style & ID encapsulation

The History of Native Web Components

https://www.w3.org/standards/history/custom-elements
https://www.w3.org/standards/history/shadow-dom

• Version 0
  • HTML Imports (Firefox says NO)
  • Custom Elements
  • Shadow DOM (& element)
  • Polymer & “Shady” DOM
• Version 1
  • HTML Imports now deprecated (thanks to Firefox)
  • Custom Elements
  • Shadow DOM (& element)

Standardization & Browser Support

https://caniuse.com/#search=custom%20elements
https://caniuse.com/#search=shadow%20dom

• Chrome first to implement
• Firefox hesitant (waiting for spec to stabilize), second to implement
• Microsoft’s failure to communicate & implement (move to chromium)

Example Component

• Native API
• Lifecycle callbacks
• Attributes
• ID unique to shadow root
  • Multiple instances of component that contains child with same ID
• Encapsulated styles
  • Styles do not “leak”, meaning a link’s style does not affect “outside” links
• Slot-based Children & Content
  • Using [named] elements for children/content insertion
• Instantiation & insertion into DOM
  • Can instantiate like a regular class and append right into DOM
• Inspection
  • Inspecting contents of a shadow-root in chrome’s dev-tools

Quark Library

https://github.com/ndugger/quark

• Goals & Objectives
  • Small Footprint (Native Functionality)
  • Easier & Encapsulated Styles
  • Use with Other Libraries
  • Slot-based children/content
• Inspired by React
  • Class-based Approach
  • JSX Support
• TypeScript
  • Better collaboration
• Bugs & Issues
  • Diffing
  • SVG & Attributes

Example Quark Widget

• TypeScript
• JSX Support
• Built-in Styling via CSS
• State Management
• Use within React