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

Even if its goin to annoy some people, I will just throw in my 2 cents on this topic. (and i feel like i have earned it after it took 6 hours to read the whole thread and some referenced content carefully)

I think the `is` thing is reinventing the wheel. Targeting standard HTML elements with selectors is done since ages in "legacy" JS, and `is` is just another way doin it. Why not just use established features? There are selectors to target elements. I imagine that the HTML DOM Elements are just behavior attached to selected elements (i know they are not in reality, but you can think of it, especially with the info given that browser engines actually test nodeNames which is just a really simple selector): `HTMLDivElement` is the behavior for all elements matching the selector `div`, `HTMLQuoteElement` is the behavior for all elements matching the selector `q, blockquote`. There is default Browser CSS and default Browser DOM (= behavior) and both target HTML declarations via selectors.
This can be modeled after and expanded on in a variety of ways:
- `customElements.define(selector, class extends HTMLElement)` collisions are resolved with normal selector precedence rules, if a more specific selector is defined later, all matching elements get upgraded to the new type
- maybe extensions? `customElements.defineExtension(selector, class extends mixin(FormParticipantBehavior, A11yBehavior, ButtonBehavior))` this is just augmenting the element and not upgrading it to another type
- heck, you can even go as far as this
  ```css
  my-button, .MyButton {
    behavior: add(A11yBehavior);
  }
  .MyButton {
    element: set-async(MyButton);
    behavior: add-async(FancyVisualsBehavior);
  }
  my-button {
    element: set(MyButton);
    behavior: set-async(FancyVisualsBehavior); /* overwrites A11yBehavior from first style */
  }
  ```

I provide some example code thats just my "personal best case" view:

How I did "CEs" the last 8 years:

MyButton.js
```js
// a) for simple stuff
;jQuery(function($) {
  $(".MyButton").each(function() {
    var $container = $(this);
    // ...
  });
});

// or b) for more complex stuff
MyButton = function(container) {
  this.$container = $(container);
  // ...
}
MyButton.prototype.doSomething = function() {};
MyButton.autoMount = function(context) {
  jQuery(context).find(".MyButton").each(function() {
    new MyButton(this);
  });
};

jQuery(function() { // this is done possibly in a separate file or in the document itself
  MyButton.autoMount();
});
```

index.html
```html
<html>
  <head>
    <!-- some FOUC fix -->
    <!-- load CSS -->
  </head>
  <body>
    <button>Normal click me!</button>

    <button class="MyButton">MyButton click me!</button><!-- hidden by FOUC fix if JS enabled, shown when upgraded -->

    <script src="MyButton.js"></script>
  </body>
</html>
```

CEs how I would like it:

MyButton.js
```js
class MyButton extends HTMLButtonElement {}
```

MyButton.html
```html
<script src="MyButton.js"></script>
<script>
  customElements.define('my-button, .MyButton', MyButton)
</script>
```

index.html
```html
<html>
  <head>
    <!-- some FOUC fix -->
    <!-- load CSS -->
    <link rel="import" href="MyButton.html" />
  </head>
  <body>
    <button>Normal click me!</button>

    <button class="MyButton">Click me!</button><!-- hidden by FOUC fix if JS enabled, shown when upgraded -->
    <my-button>Click me!</my-button><!-- hidden until upgraded, never visible without JS -->
  </body>
</html>
```



CEs how I would like it with ES6 imports (made up browser support):

MyButton.js
```js
export default class MyButton extends HTMLButtonElement {}
```

MyButton.html
```html
<script>
  import MyButton from 'MyButton'
  customElements.define('my-button, .MyButton', MyButton)
</script>
```

index.html
```html
<html>
  <head>
    <!-- some FOUC fix -->
    <!-- load CSS -->
    <link rel="import" href="MyButton.html" />
  </head>
  <body>
    <button>Normal click me!</button>

    <button class="MyButton">MyButton click me!</button><!-- hidden by FOUC fix if JS enabled, shown when upgraded -->
    <my-button>MyButton click me!</my-button><!-- hidden until upgraded, never visible without JS -->

  </body>
</html>
```

These are just some fresh ideas i wanted to toss in. Maybe someone finds the one or other thing a little bit inspiring.

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

Received on Sunday, 14 May 2017 15:25:14 UTC