Look into Angular Elements as possible bridge between platforms

[benjamincharity]

Goal

Determine if Angular Elements is a reasonable approach to allow this library to support multiple JS frameworks.

Tasks

• [ ] Convert TsIconComponent to a custom web component
• [ ] Convert TsButtonComponent to a custom web component
• [ ] Test consuming one web component into another (verifying our build tool capability)
• [ ] Test component:
  • [ ] Use in an AngularJS app
  • [ ] Use in a VueJS app
  • [ ] Use in a React app
  • [ ] Use in a an Angular test environment
• [ ] Compare web component size to standard size (kb)

What to document

• How is usage different?
• How would our documentation need to change?
• Are there speed differences?
• Are there bundle size differences?

---

Resources

• https://www.telerik.com/blogs/getting-started-with-angular-elements
• https://github.com/nrwl/playbook-angular-v6-elements-example/blob/master/elements/polyfills.ts#L81-L87
• https://blog.bitsrc.io/creating-a-reusable-accordion-component-that-works-anywhere-2f2add05baa4
• https://egghead.io/courses/getting-started-with-angular-elements

[benjamincharity]

Currently on hold. Looking into lift to upgrade Hub from AJS 1.4.3 to 1.7.3.

---

Current Status

For all implementations

• Requires us to disable OnPush
  • Supposedly some work arounds w/polyfill - we have been unable to get this to work.
  • A PR is already open in Angular repo to fix this. (Last comment was 9/2018)
• ViewEncapsulation must be set to ShadowDom

AngularJS

• Requires upgrade to AJS 1.7.3
  • First-class support for Angular Elements was not added until 1.7.3
  • Supposedly some work arounds w/polyfill - we have been unable to get this to work.
  • Some report that using a polyfill works in 1.5.x but this did not work with 1.4.3
• Requires us to disable OnPush
  • Supposedly some work arounds w/polyfill - we have been unable to get this to work.
  • A PR is already open in Angular repo to fix this. (Last comment was 9/2018)