Using Scrollmeister with virtual DOM

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 src and 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).