Web Components

Virtual DOM and WebComponents represent different technologies. Virtual DOM provides a declarative way to write the UI and keep it sync with the data, while WebComponents provide an encapsulation for reusable components. There are no limitation to use them together, you can use asm-dom with WebComponents or use asm-dom inside WebComponents.

Using WebComponents in asm-dom

With asm-dom you can just use WebComponents as any other element:

// customElements.define('my-tabs', MyTabs);

VNode* vnode = h("my-tabs",
  Data(
    Attrs {
      {"class", "css-class"},
      {"attr", "an attribute"}
    },
    Props {
      {"prop", "a prop"}
    },
    Callbacks {
      {"tab-select", onTabSelect}
    }
  ),
  Children {
    h("p", std::string("I'm a child!"))
  }
);

Using asm-dom in WebComponents

At the moment creating WebComponents from C++ is not so easy, you problably need to mix some C++ and Javascript code, maybe with emscripten_run_script, EM_ASM or Embind. Please, to make asm-dom work, make sure to enable the usage of patch in multiple points of your app with unsafePatch = true in the init function.