Re: [w3c/webcomponents] ES5 consideration for custom elements (#423)

I didn't read the whole thread, but currently, Custom Elements are compatible with ES5 constructor-pattern classes like this:

```js
function MyElement() {
    // The only caveat: just don't do anything in this constructor.
}

MyElement.prototype = Object.create(HTMLElement.prototype)
MyElement.prototype.createdCallback = function createdCallback() {
    // Instead, do your "constructor" logic here.
}

MyElement = document.registerElement('my-element', )
// ^ This assignment is required if you'd like to use `new MyElement` directly
// instead of document.createElement('my-element')

export default MyElement
```

This also works with ES6 classes:

```js
class MyElement extends HTMLElement {
    createdCallback() {
        // Do your "constructor" logic here.
    }
}

MyElement = document.registerElement('my-element', )
// ^ This assignment is required if you'd like to use `new MyElement` directly
// instead of document.createElement('my-element')

export default MyElement
```

then in another file

```js
import MyElement from './my-element'

let el = document.createElement('my-element')
// or
let el = new MyElement
```

It'd be cool if it just worked properly with (at least) ES6 classes:

```js
class MyElement extends HTMLElement {
    constructor() {
        // Do your actual constructor logic here.
    }
}

document.registerElement('my-element', MyElement)
// ^ With no assignment needed.

export default MyElement
```

then just

```js
import MyElement from './my-element'

let el = new MyElement

// document.createElement() not needed, but can exist for backwards compatibility.
```


---
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
https://github.com/w3c/webcomponents/issues/423#issuecomment-208131046