Re: [w3c/webcomponents] The is="" attribute is confusing? Maybe we should encourage only ES6 class-based extension. (#509)

For example, suppose we target only JS-enabled Custom-Element-API-having browsers. In this case, we should be able to do

```js
customElements.define('enhanced-tr', class EnhancedTR extends HTMLTableRowElement {...})

someTableBody.appendChild(
  document.createElement('enhanced-tr')
)
```
```html
...
<tbody>
  <enhanced-tr>...</enhanced-tr>
</tbody>
...
```

and it should *just work* without `is-""`, without `{extends: 'tr'}`, and without `document.createElement('enhanced-tr', 'tr')`; without any redundancy. This would be the best developer experience.

*Then later*, we can add a new `is=""` attribute designed specifically for fallbacks if people really want it enough. The previous HTML snippet simple changes to

```html
...
<tbody>
  <tr is="enhanced-tr">...</tr>
</tbody>
...
```

but it has *nothing to do with inheritance*, and behaves exactly the same as the `<enhanced-tr>` version when the browser supports Custom Elements, otherwise behaves only like a `<tr>` in non-supporting browsers.

The important thing to re-iterate: `is=""`  does not define inheritance. In this new design, we could do this:

```js
customElements.define('awesome-button', class extends HTMLDivElement {...})
```
```html
<awesome-button>
</awesome-button>
```

and we could also do this

```html
<button is="awesome-button">
</button>
```

Note that the Custom Element `awesome-button` does not even extend from `HTMLButtonElement`, it is just an enhanced `div` element that is coded to behave like a button.

In the example with `<button is="awesome-button">`, a browser that supports Custom Elements looks only at the `is=""` attribute (when present) to know what behavior an element has, so the button is an instance of the anonymous class associated with `awesome-button` which extends from `HTMLDivElement`, and the instance does not inherit any behavior of the native `<button>` element whatsoever. It behaves exactly the same as the first example.

The reason for this would be that is="" is strictly for fallbacks: in a browser without JS, or without Custom Elements, the is="" attribute simply does nothing, and the browser instantiates a native `<button>` element.

Basically, in the case that Custom Elements API exists, then

```html
<button is="awesome-button"></button>
```

behaves exactly the same as

```html
<asfasdf is="awesome-button"></asfasdf>
```

both cases create an instance of `<awesome-element>` which is just an enhanced `<div>` element.

This allows developers who are targeting modern browsers to have the best dev experience more similar to React: they are going to have access to JavaScript, and they are going to easily be able to look up the class definition for awesome-button.

Then the rare case for fallbacks (the rare case that someone cares to develop for elinks) can be handled with is="" without the meaning of is="" intertwined with inheritance.

Fallback authors can do


```html
<button is="awesome-button"></button>
```

or they can do

```html
<div is="awesome-button">
</div>
```

Fallback authors can choose what to fall back to, without being coupled to inheritance.

-- 
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/509#issuecomment-289310187