Javascript Component as Component Container

Hello community,

i recently had the idea to create a Component in Vaadin which behaves like the divs in this JSFiddle:
To implement this there are several possible ways. Implementing it by using a CustomLayout already worked for me but it’s not as flexible as i want it to be (only a set amount of divs). Another way was creating a custom Extension for Panel which handles the panel component kinda like the divs in the jsfiddle examples, also adding the styles and the Javascript method to them. This works quite well but i’m a bit concerned about its performance because i now have the entire panel + panel-content DOM structure to transform and not just a div and its contents.

Now because most of the coding i use is done in Js, html and css i though why not create a “simple” Javascript component. This way i can dynamically add divs and handle all events inside the component.

That’s why i have the question:
Is it possible to add Vaadin components into custom written and integrated JS components? (Essentially all (most) Vaadin components are based of html elements so i should be able to get the elements, render them and add them to the div right?)
If yes how difficult would it be? The way to do a custom gwt component container described
is based on the AbstractComponentContainer class and a gwt widget that already supports container functionality so it doesn’t really tell anything about how to it with js.

In case it doesn’t work i already have a backup plan on doing it in gwt so that i can then integrate it in Vaadin.