[bug] Reactive props update the web component root, not to the child inputs.

[devjoseluis]

Description

On the initial render of ReactPinField, the props passed are transmitted to the child inputs and removed from the root element, but when the props value gets updated, the root element gets synced, but the child inputs do not.

Expected Behavior

The props should be synced to the child inputs and removed from the root element.

Actual Behavior

The props updates only apply to the root element.

Possible Fix

Maybe listen for the props changes in the attributeChangedCallback of the https://github.com/soywod/pin-field web component: https://github.com/soywod/pin-field/blob/d398dc287c606fe4eefd57a5c79abc439cc9c092/src/index.ts#L124

And do something like in the connectedCallback, pass the props to the child inputs and remove them from the root element: https://github.com/soywod/pin-field/blob/d398dc287c606fe4eefd57a5c79abc439cc9c092/src/index.ts#L155-L162.

Steps to Reproduce

1. Add a dynamic prop to the ReactPinField component. (ex. className={someDynamicState}).
2. Update the dynamic prop value.
3. The prop is updated in the <swd-pin-field> component.
4. The prop isn't transmitted to the child inputs.

The demo in the repository shows the bug: https://github.com/soywod/react-pin-field/blob/133b5a5ed4de523f9572117229e80989eed65aa4/src/demo/index.tsx#L51-L53

Environment

• Version used: 2.0.0-beta.2
• Browser Name and version: Brave Browser V1.26.67 Chromium: 91.0.4472.114 (Official Build) (x86_64)
• Operating System and version: macOS Big Sur 11.4
• Link to demo: https://react-pin-field.soywod.me

[soywod]

The native web component was a big mistake, it led to so many issues… I ended up rolling back to v1 state, without web component (pure React implementation). The issue should be fixed starting from the v3.0.11.