Attribute change from parent is not working

[filflora]

Describe the bug
In a parent-child relationship where the child is a React based web component, the parent can not change the props of the web component.

To Reproduce
Steps to reproduce the behavior:
Create a webcomponent with Direflow and embed it somewhere. Try to change an attribute like in the documentation:
const component = document.querySelector('awesome-component');
component.sampleList = ['Create', 'Build', 'Use']

or

Checkout this repository: https://github.com/filflora/direflow-poc
npm i and cd direflow-poc
npm start
Open up http://localhost:3000 in Chrome and open devtools
Click "Change attributes" button
See err message: Uncaught DOMException: Failed to execute 'attachShadow' on 'Element': Shadow root cannot be created on a host which already hosts a shadow tree.
Button click event handler is in: public/index.html

Expected behavior
The web component should receive the new attribute value and rerender component accordingly.

Package Manager:
To install Direflow, I used npm.

Additional context
I'd like to find a solution to reuse (separately developed) components in multiple microApps. In a scenario where multiple micro applications have the same header component which can be maintained separately.

Screenshot

[SimonHoiberg]

Hi @filflora
Thanks for creating a very well reported issue - it was really nice that you made a repro in a separate repository - made it very easy to spot the problem.

It was indeed a bug.
The issue has been fixed in v. 2.2.2.
I checked it on your direflow-poc repo, and everything seems to work as expected now 👍

If you bump your version of direflow-component to 2.2.2 in your package.json file, things should work 🙂

[filflora]

Thanks @silind ! This was fast... and it's working now. :)