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

@trusktr 

> If we follow the current `<button is="my-button">` in the current order, then there's also the question of what something like `<my-better-button is="my-button">` does, and how can that ever fall back to `<button>`?

you did one extend right but you lost it in the second attempt. If it's native that you want to preserve, you'd have `<button is="my-button">` **and** `<button is="my-better-button">`.

While you'd use `{extends: 'button'}` for the first case, you'll use `{extends: 'my-button'}` in the second because being inherited via `MyBetterButton` it needs to be known.

Accordingly, this is how it could be via current specs, since you have a dependency.

```js
customElements.whenDefined('my-button', () => {
  // avoid concurrent re-definition if run more than once
  if (customElements.get('my-better-button')) return;
  // define my-better-button
  customElements.define(
    'my-better-button',
    class MyBetterButton extends MyButton {},
    {extends: 'my-button'}
  );
});
```

That's it, you preserve backward compatible built-ins semantics, you have the freedom to inherit anything that implements at its root the same built-in.

Accordingly, I don't see your point as a real issue, it's just that `is=""` is ugly for devs, but like already stated before by others, designers behind templates or people on the FE won't ever complain about.

**It works**, and it's been working for years, which is why I believe we already have the pencil but few are not realizing it, and they are looking for a pen thinking it'd be simpler.



-- 
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-265975522