is there a way to inject html elements into compos...

# webassembly

[Chrys]

is there a way to inject html elements into compose wasm? I need to add stripe pricing table in the middle of our landing page

<stripe-pricing-table pricing-table-id="prctbl_xxxxx"
publishable-key="pk_test_xxxxx">
</stripe-pricing-table>

. So far i've found this unconclusive github issue: Use HTML tag in Compose for web / Kotlin Wasm · Issue #3172 · JetBrains/compose-multiplatform

[Robert Jaros]

A bit more info here: https://youtrack.jetbrains.com/issue/CMP-6858/Be-able-to-use-HTML-elements-from-Compose-Web-HtmlElement#focus=Comments-27-11562381.0-0

[Ronald Wolvers]

If drawing the HTML element you want to draw needs to happen inside the HTML <canvas/> where Compose draws, not quite sure, but in my project I have been able to modify the DOM from Kotlin (in a Multiplatform project), using these steps: https://kotlinlang.org/docs/wasm-js-interop.html
Important to point out that the banner "Alpha" is there for a reason, you will definitely run into unexpected behaviors (as I did), so would recommend to use this with caution.
Also interesting perhaps to look at:
https://stackoverflow.com/questions/12652769/rendering-html-elements-to-canvas
I have not tried these solutions first-hand, but if you don't want to stop with the "not-implemented-yet" scenario, perhaps it's interesting to look at!

[Ronald Wolvers]

To add to my previous message:
Injecting a new element into the DOM from Kotlin will be rather easy (the WASM/JS interop article will tell you how, otherwise I'm happy to show you)
Injecting a new element into the <canvas /> will - I think - be (very) difficult, especially difficult if it needs to properly interact with Compose and not break its "context", but I think the Kotlin/WASM interop code is fully open source (https://github.com/Kotlin/kotlinx-browser) and at the same time I'm not entirely sure how active development on it is, but the code is there to modify!

[Chrys]

initial intention was to inject into the canva. i ended up absolutely positioning the element over the canvas at bottom 0. Thanks for the insights

[Ronald Wolvers]

Glad to hear there has been progress! Happy to help! 🙂