[proposal] move exposed native elements to shadow DOM

[DRiFTy17]

Proposal

Refactor most, if not all, components that currently enhance/extend native elements (see affected components below) by moving their exposed native elements into the shadow DOM.

Affected components:

• Autocomplete
• Button
• Checkbox
• Chip Field
• Date Picker
• Date Range Picker
• Floating Action Button
• Icon Button
• Menu
• Radio
• Time Picker

Benefits

• Avoid the need to patch native element properties to be notified of state changes
• Avoid the need to manually dispatch native events on these elements in response to custom element state changes
• Native elements now become an implementation detail instead of a requirement of the API
• Gets rid of global styles potentially affecting these native elements and causing unwanted style overrides (especially common when mixing multiple UI libraries)
• Allow for much better integration and design opportunities
• Provides a layer of abstraction to process communication and state changes in a reliable fashion.
• Consistent with almost all other Web Component libraries in the wild.

Caveats

• Requires proxying all native element functionality through the custom element.
• Partially goes against our currently composability principle.
• Requires developers to "learn" how to use our APIs for things they previously already knew how to do.
• Fairly large deviation in our current philosophy/usage, that could cause a lot of disruption in existing applications using Forge.
• For components that just attach themselves to a child <input> such as autocomplete and date-picker, they will need to potentially "know" about how to interact with custom elements that we may need to account for now.
• Requires custom elements to provide all needed accessibility customizations for developers.
• May run into limitations with third-party tooling?
• Additional adapters for seamlessly integrating with UI frameworks