[w3c/webcomponents] defining and instantiating customized built‐in elements as if they were autonomous custom elements (#613)

I think that a lot of people from #509 (at least @WebReflection, @trusktr, @oleersoy, the 14 people who upvoted the OP at the time of writing, and I) seem to agree that, even if it’s not ultimately bad, the `is` attribute doesn’t feel very natural, and isn’t very DRY. Even everyone who rejected the @trusktr’s original idea seemed to at least admit that `is` is not perfect.

There, as a less drastic option, I proposed that customized built‐in elements should be instantiated like autonomous built‐in elements, and at least @WebReflection thought it was a good idea.

Here I’m proposing that customized built‐in elements should be ***defined and*** instantiated like autonomous built‐in elements.

There are plans to give every native HTML element its own class. Then, the fact that the class used to define the custom element extends a native element’s class should be enough information that the element should be a customized built‐in element, and not an autonomous custom element:

```Javascript
class PlasticButton extends HTMLButtonElement {
  constructor() {
    super();

    this.addEventListener("click", () => {
      // Draw some fancy animation effects!
    });
  }
}

customElements.define("plastic-button", PlasticButton /*, { extends: "button" }*/);
```

Additionally, the fact that the element has been defined as a customized built‐in element should be enough information that, when created, it should be a customized built‐in element:

```Javascript
let plasticButton = document.createElement("plastic-button");
console.log(plasticButton.localName);          // will output "button"
console.log(plasticButton.getAttribute("is")); // will output "plastic-button"
```

Cons:

* It might not be clear from the `createElement` call that the `plasticButton.localName` will be just `"button"`. This issue would practically be unnexistent in the real world, though, as development tools allow you to inspect the document tree, allowing you to clearly see the element’s tag name.

-- 
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/613