# Creating a custom element / webcomponent

**URL:** <https://discuss.kotlinlang.org/t/creating-a-custom-element-webcomponent/3988>\
**Category:** JavaScript\
**Created:** [August 1, 2017, 12:17pm UTC](https://discuss.kotlinlang.org/t/creating-a-custom-element-webcomponent/3988 "2017-08-01T12:17:45Z")\
**Posts on this page:** 1\
**Showing post:** 5

<div class="post-metadata">

**Author:** ![jdemeulenaere](https://avatars.discourse-cdn.com/v4/letter/j/ecc23a/32.png) [@jdemeulenaere](https://discuss.kotlinlang.org/u/jdemeulenaere)\
**Post date:** [September 16, 2017, 8:54pm UTC](https://discuss.kotlinlang.org/t/creating-a-custom-element-webcomponent/3988/5 "2017-09-16T20:54:13Z")

</div>

Did you manage to create custom elements with KotlinJS ? I tried the code given by Alexey but unfortunately the generated code throws an error :

```
Uncaught TypeError: Failed to construct 'HTMLElement': Please use the 'new' operator, this DOM object constructor cannot be called as a function.
at new CounterElement (komponent_main.js:161)

```

Here is my code :

```
abstract class CustomElement : HTMLElement() {
	init {
		println("Creating custom element")
		textContent = "Hello world"
	}
}

fun <T : Element> defineElement(name: String, constructor: KClass<T>) {
	window.customElements.define(name, constructor.js.unsafeCast<() -> dynamic>())
}

fun main(args: Array<String>) {
	defineElement("custom-element", CustomElement::class)
}

```

---

_[View the full topic](https://discuss.kotlinlang.org/t/creating-a-custom-element-webcomponent/3988)._