Webcomponent's with kotlin/js is a pain. Mostly co...

# javascript

[andylamax]

Webcomponent's with kotlin/js is a pain. Mostly coz extending HTMLElement requires you to implement a bunch of methods, some of them from interfaces with external optional methods and implementation. Code looks like so and that is just boiler plate.

class TestElement : HTMLElement() {
    override val childElementCount: Int
        get() = TODO("Not yet implemented")
    override val children: HTMLCollection
        get() = TODO("Not yet implemented")
    override var contentEditable: String
        get() = TODO("Not yet implemented")
        set(value) {}
    override val isContentEditable: Boolean
        get() = TODO("Not yet implemented")
    override val style: CSSStyleDeclaration
        get() = TODO("Not yet implemented")

    override fun after(vararg nodes: dynamic) {
        TODO("Not yet implemented")
    }

    override fun append(vararg nodes: dynamic) {
        TODO("Not yet implemented")
    }

    override fun before(vararg nodes: dynamic) {
        TODO("Not yet implemented")
    }

    override fun convertPointFromNode(point: DOMPointInit, from: dynamic, options: ConvertCoordinateOptions): DOMPoint {
        TODO("Not yet implemented")
    }

    override fun convertQuadFromNode(quad: dynamic, from: dynamic, options: ConvertCoordinateOptions): DOMQuad {
        TODO("Not yet implemented")
    }

    override fun convertRectFromNode(rect: DOMRectReadOnly, from: dynamic, options: ConvertCoordinateOptions): DOMQuad {
        TODO("Not yet implemented")
    }

    override fun getBoxQuads(options: BoxQuadOptions): Array<DOMQuad> {
        TODO("Not yet implemented")
    }

    override fun prepend(vararg nodes: dynamic) {
        TODO("Not yet implemented")
    }

    override fun querySelector(selectors: String): Element? {
        TODO("Not yet implemented")
    }

    override fun querySelectorAll(selectors: String): NodeList {
        TODO("Not yet implemented")
    }

    override fun remove() {
        TODO("Not yet implemented")
    }

    override fun replaceWith(vararg nodes: dynamic) {
        TODO("Not yet implemented")
    }
}

Can't the HTMLElement class be declared to show that these methods are already implemented externally?

[Big Chungus]

You can always declare your own external HTMLElement class and declare functions as val lambdas and use definedExternally as implementation

[Big Chungus]

E.g. open val remove: ()->Unit = definedExternally

[turansky]

ES6 class - requirement for web component
Kotlin/JS output - ES5 class 😞

[turansky]

You can use webcomponent plugin if you need webcomponents right now 🙂

[andylamax]

Looks like too much of a hustle, I'll wait for ES6 support

[andylamax]

Thank you all

[Ilya Goncharov [JB]]

In fact you don’t need to implement all these members on your own. You can make your web component as abstract and then register it via browser API window.customElements.define and then create with usual document.createElement
But yes, the main problem, that for now it will not work because web-components requires ES2015 class signature

fun main() {
    window.customElements.define("popup-info", MyElement::class.js.unsafeCast<() -> dynamic>())
    document.createElement("popup-info").apply {
        document.appendChild(this)
    }
}

abstract class MyElement: HTMLElement()

[andylamax]

then, its smart to wait