property: React not re-rendering when i change web component attribute

[jaing]

I created a basic web component based on react. I do this:

`

    ....
  css: '',
    render: ({chain, hotel, arrival, departure, css}) => {
        console.log(chain);

        return reactify(
            <div>
                <link rel="stylesheet" href={css} />
                <ProductListWrapper chain={chain} hotel={hotel} arrival={arrival} departure={departure} />
            </div>
        )
    },

`

and when i change a web component attribute manually in dev tools or via:

let myElement = document.getElementsByTagName('kutasiki')[0]
myElement.setAttribute('chain', 22)
myElement.render()

i doesnt rerender react component to consume up to date attributes. I'm missing something here?

[smalluban]

To clarify, if you set your property as something different than an object structure with get or set method, the library tries to translate those values. Usually, property factory is used:

import { property } from 'hybrids';

const myElement = {
  chain: 'value', 
  // this equals to
  chain: property('value'),
};

chain property from the example above works how property factory is designed. You can find more about attributes in this section. It says that attributes are only used once when an element connects to the DOM. This design pattern follows <input /> behavior, and it allows not to observe attribute changes. You should treat attributes in HTML as static values, and use properties for dynamic changes. In your example you can do just like that:

let myElement = document.getElementsByTagName('kutasiki')[0]
myElement.chain = 22; // <-- Use property, not attribute 

// This is no longer needed, as render property can detect the change and re-render when needed
// myElement.render()

Couple thoughts about your component example. I can see there, that you are using external CSS. If you want to create web component, which can be used with polyfills, you should avoid using <link> (https://github.com/webcomponents/shadycss/issues/97). If you want to use the hybrids to create a wrapper for React component, I recommend using render factory without shadow DOM. I think you don't need distribution (using <slot> elements) and your CSS can be on the document level (I assume you are using some tool for styling, like CSS modules or styled components). If you want to do this, just use render factory directly and pass the second argument to disable Shadow DOM:

import { render } from 'hybrids';

const MyElement = {
   ...,
   render: render(
     ({ chain, ... }) => reactify(<div>...</div>),
     { shadowRoot: false },
   ),
};

One more thing 🤣 - you can't create a custom element without dash character in the tag name, even if is so funny as "kutasiki".

[smalluban]

I hope I could help. If there something more to discuss feel free to re-open issue.

[jaing]

Thanks buddy - its working as expected now.