[w3c/webcomponents] idea: easy way to specify attributes (and optionally enable getters/setters). (#517)

Skate.js has a feature where one can specify attributes, and this automatically creates setters/getters.

I think this is a really good idea because it makes things easy, but more importantly, it can enable integrations with other libraries more easily.

For example, suppose we can specify attributes somehow (either via class properties in the near future, or in the constructor for now):

```js
class MyElement extends HTMLElement {
  constructor() {
    super()

    // this can be optional
    this.attributes = [
      "foo",
      "bar",
    ]

  }

  // if "foo" attribute was specified during creation (HTML engine would check
  // this after the constructor call), then it will use (if present) the
  // specified matching getter/setter on the instance to get/set values for the
  // attribute. This could be nice because it would mean that
  // this.getAttribute('foo') could return an object instead of a string, and
  // this.setAttribute('foo', ...) could accept anything, not just strings!
  set foo(value) { ... }
  get foo() { ... }
}
```

This has two major benefits from a programming perspective:

1. This is a nice shortcut for something that many people will want to do anyways (Skate.js, X-Tags, and Polymer all implement some form of this).
1. Other libraries like `jQuery` would be able to reliably determine which properties an element has defined, and would therefore be able to automatically create getter/setter proxies. For example, this would allow the following jQuery code (assuming jQuery takes advantage of a such a feature if it were real):
  ```js
  // pass something to all matching elements:
  $('#awesome-element').attr('hello', new AnythingThatIsNotAString())
  ```

I think that right there lends to some powerful new possibilities and could be one way to avoid having to convert everything to/from strings! Of course, things like Chrome's element inspector would then ultimately call `toString` on the things returned from the attribute setters/getters, so we might see things like

```html
<div foo="[object Object]">
```

But, this presents the opportunity for component developers to define `toString` methods! Furthermore, just like now, developers can continue to accept string input (that may match their `toString` output format), which would be really cool!!

There's performance benefits:

1. When the an HTML object's properties are not being observed (for example by devtools) then there's an opportunity for values passed to/from attributes to never ever be converted to/from strings. The end user of a Custom Element can take advantage of this by simply never passing string values to setAttribute/getAttribute or the matching setters/getters.
1. libraries like React will not have to convert values to strings any more, and can just pass the JS values directly!

Something like this would be cool!

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