React etc. virtual DOM mismatch about scrollmeister

[Prinzhorn]

Can we "simulate" something like shadow DOM? I mean not really, but like this

<el-meister gl-effect>
    <img src={src}>
    <div data-scrollmeister-shadow />
</el-meister>

Now Scrollmeister can do whatever the f it wants inside data-scrollmeister-shadow, e.g. appending a canvas or the touch overlay. In React we can easily abstract this away and offer an ElMeister component.

<ElMeister gl-effect>
    <img src={src}>
</ElMeister>

...

let {children, ...props} = this.props;

<el-meister {...props}>
    {children}
    <div data-scrollmeister-shadow />
</el-meister>

[Prinzhorn]

<shadow-meister> (with display: contents)

[Prinzhorn]

(with display: contents)

done.

And bonus points for automatically cleaning up children when a behavior is detached (#15). Similar to listen.

The only question is what we do about manipulating attributes. I think touching styles is OK. The bigger issue is data-src and src. But we might as well make the lazy-load behavior configurable. So you can disable the automatic replacement and instead React can listen for events and check el.lazyLoad.loaded prop. This can also be useful for other cases where you don't have a data-src but want to lazily fetch() a resource. Behaviors that need this can then connectTo lazyload.

[Prinzhorn]

#22 is related is well. Scrollmeister works great so far for static HTML, but DOM manipulation using React, jQuery or plain setAttribute etc. are not done yet.