is there a cleaner less hacky way to create a web ...

# javascript

[janvladimirmostert]

is there a cleaner less hacky way to create a web component in KotlinJs?
this is what I managed to do so far:

open external class HTMLElement

class BlahComponent : HTMLElement() { }

window.customElements.define("test-blah", BlahComponent::class.js as () -> dynamic)
val e = document.createElement("test-blah")
e.attachShadow(ShadowRootInit(ShadowRootMode.OPEN)).also {
    it.asDynamic().innerHTML = "<p>BLAH!</p>"
}

doing something like this, I can get the callbacks working too

open external class HTMLElement

external interface WebComponent {
    fun connectedCallback()
    fun disconnectedCallback()
    fun adoptedCallback()
    fun attributeChangedCallback(name: String, oldValue: String, newValue: String)
}

class BlahComponent : WebComponent, HTMLElement() {

    override fun connectedCallback() {
        println("connectedCallback")
    }

    override fun disconnectedCallback() {
        println("disconnectedCallback")
    }

    override fun adoptedCallback() {
        println("adoptedCallback")
    }

    override fun attributeChangedCallback(name: String, oldValue: String, newValue: String) {
        println("attributeChangedCallback: $name $oldValue $newValue")
    }


}

but it feels like I'm re-implementing / wrapping something from scratch that is probably already there somewhere

[turansky]

Do you use Kotlin Wrappers?

[turansky]

Missed interfaces you can find here

[turansky]

customElements

[janvladimirmostert]

that's really nice, thanks a lot!

[turansky]

@JsStatic is already available in Kotlin/JS ;)