[w3c/webcomponents] Customized Autonomous Elements (#750)

Right now, to extend an autonomous Custom Element you extend the JS class and then must register a new tag name. For instance:

```html
<script>
class MyTextbox extends HTMLElement {
  connectedCallback() { this.textContent = "MyTextbox"; }
}
customElements.define("my-textbox", MyTextbox);

class MyAutocompleteTextbox extends MyTextbox {
  connectedCallback() { this.textContent = "MyAutocompleteTextbox"; }
}
customElements.define("my-autocomplete-textbox", MyAutocompleteTextbox);
</script>

<style>
  my-textbox, my-autocomplete-textbox { padding: 10px; }
</style>
<my-textbox></my-textbox>
<my-autocomplete-textbox></my-autocomplete-textbox>
```

However, there isn't a way to customize the base autonomous element in the same way you can [customize a built-in element](https://html.spec.whatwg.org/multipage/custom-elements.html#customized-built-in-element) with the `[is]` attribute. Being able to do this would make it easier to share CSS and JS that are targeting the base autonmous element's tag name (`my-textbox` in this case). For example:

```html
<script>
class MyTextbox extends HTMLElement {
  connectedCallback() { this.textContent = "MyTextbox"; }
}
customElements.define("my-textbox", MyTextbox);

class MyAutocompleteTextbox extends MyTextbox {
  connectedCallback() { this.textContent = "MyAutocompleteTextbox"; }
}
customElements.define("autocomplete-textbox", MyAutocompleteTextbox, { extends: "my-textbox" });
</script>

<style>
  my-textbox { padding: 10px; }
</style>
<my-textbox></my-textbox>
<my-textbox is="autocomplete-textbox"></my-textbox>
```
 
Implementations currently differ with how they treat this second case:

* In Firefox, it throws a `NotSupportedError: Operation is not supported`
* In Chrome and Safari it runs without exception, but it uses the `MyTextbox` class instead of the `MyAutocompleteTextbox` class on the `<my-textbox is="autocomplete-textbox">` element.

I can't find prior discussion indicating why customizing elements is only supported for built-ins and not autonomous, so I'd like to see if this is something that could be supported.

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