Re: [w3c/webcomponents] Non-class based example of customElement.define() (#587)

I had hopes for a better solution to emerge with better backwards compatibility. Since the `class` syntax currently has to be used to create custom HTMLElements, unless using `Reflect.construct`, but does not yet support extending HTMLElements with additional behaviour (since we want to avoid the creation of HTMLElements with no special behaviour). It leaves us with a mixed syntax code base that is quite ugly to look at and more difficult to read. 

For example I still have code running that uses the following syntax which still works, but has one foot out the door:
```javascript
var TestButton = document.registerElement('test-button', {
  prototype: {
    __proto__: HTMLButtonElement.prototype,

    createdCallback: function() {
      this.addEventListener("click", function(event) {
        console.log('test');
      });
    },
  },
  extends: 'button',
});
```
```html
<button is='test-button'>test</button>
```

Whereas this does not: 
```javascript
class TestButton extends HTMLButtonElement {
  constructor() {
    super();

    this.addEventListener("click", function(event) {
      console.log('test');
    });
  }
}
customElements.define("test-button", TestButton, { extends: "button" });
```

> Warning: At time of writing, no browser has implemented customized built-in elements (status). This is unfortunate for accessibility and progressive enhancement. If you think extending native HTML elements is useful, voice your thoughts on 509 and 662 on Github.




       

-- 
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/587#issuecomment-373932458