Add Form Component - Radio & Checkbox

[nizniz187]

Due the similarity of these 2 components, this issue is opened for developing the further common parts.

[nizniz187]

Add Checkable class as the parent to be extended on commit 2386fb0.

[nizniz187]

Fix spacing between icon & slot on commit 7ff5a1d.

[nizniz187]

For native form / input feature support such as change handler and form element direct access, the
Customized built-in element is what we need.
However, the Safari browser support (even Chrome on iOS) remains an issue till now on 2021.

According to the issue thread, this is closed as WONTFIX and expected to fulfill with a polyfill, which implies that it may remain officially unsupported on Safari/iOS in the near future.

For now, I prefer to use the "standard way", and introduce the polyfill for Safari/iOS users.

[nizniz187]

Studied material-components, which extends LitElement as their base element. That said, they don't use customized built-in elements for form elements, but rather extend all from HTMLElement and build their own.

[nizniz187]

Customize built-in component (HTMLInputElement) issues:
1. "is" attribute is required

• UA needs to distinguish between built-in and non-built-in elements. (source)
• Which will eventually cause inconsistent user experience.

2. "type" attribute needs to be user-specified

• Which is redundant but without it the construct process will face an initial type problem.
  • Render is executed before the custom type specified.
  • Built-in element cannot assign prototype field.

3. Shadow DOM is not supported for input & label

• Valid element list
• Which breaks the original CSS-controlled icon-font mechanism.

Due to the issues above, we may need to re-consider using customized built-in elements for Form Components.