In theory you can use custom elements like any other element. React and others don't care if they insert a
div or an
element-meister into the DOM, same for arbitrary attributes. However, since some behaviors manipulate the DOM of the elements they are attached to, you need to be cautious. Otherwise if the virtual DOM and actual DOM come out of sync you're gonna have a bad time.
Scrollmeister tries to avoid as many conflicts as possible. If you render an
element-meister element make sure it has an empty
shadow-meister element. The contents of the
shadow-meister will be controlled by the behaviors. For example if a behavior needs to append a new element, if will do so inside the
shadow-meister. You also need to have a
content-meister right inside your
element-meisster or else Scrollmeister will wrap it for you, bringing the virtual DOM out of sync.
So basically render the following with React, Vue etc. (which you can easily abstract with a
ElementMeister component which hides the details)
<element-meister> <content-meister> <!--your react component is allowed to render whatever inside here--> </content-meister> <shadow-meister> <!--your react component leaves this completely empty and never does anything inside here--> </shadow-meister> </element-meister>
So far I'm not sure how to handle attribute modifications though.
style should be not problem and not result in conflicts. But for example the
lazy-load behavior changes
data-src. If react later changes the
data-src (e.g. new image), the behavior needs to do its thing. Could be solved using events though (the actual attribute modification would then happen by React using state).