[webcomponents] Feedback for web components spec from a GWT experiment

First of all, the progress in web components is quite exciting, thanks for
all the hard work.

I recently started experimenting with adding web components support to GWT
and I'm looking forward to get rid of our own old widget abstraction in GWT
in favor of web components. However, there has been a few surprises for me
- please consider this as a library developer feedback for the APIs and the

A quick disclaimer: I'm a long time Java developer and much more influenced
by it in contrast to js.

First issue for me was; I assumed that adding a HTMLElement to the
prototype chain would be enough to use it as an element:

  function MyCustomElement() {};
  MyCustomElement.prototype = Object.create(HTMLElement.prototype);
  document.appendChild(new MyCustomElement());

I guess the reason I was thinking that way was mostly historical reasons.
In OO platforms, defining your own widget has been just a matter of
extending a base class. I assumed that would be similar here. I thought
that the document.register was optional and exists to associate my element
with a tag name so that it can be used elsewhere via the custom name.

The second surprise to me was (due to same assumptions I made earlier); the
requirement to use the function returned from document.register. This makes
things quite difficult because I would like to maintain traditional
imperative style that developers are already familiar with:

  // <Java>
  class MyCustomElement extends HTMLElement { ...  }

  // Somewhere else in the code
  parent.appendChild(new MyCustomElement());

However, it is quite hacky to replace earlier constructor function with the
function returned from document.registerElement in a compiled language to
keep "new" on MyCustomElement working.

All this may sound specific to GWT but actually I think it is more about
object orientation and I can imagine similar issues will be hit with
classes in ES6, Dart and others.

I am not much aware of the internal mechanics of the browser, but I always
wonder if it would be feasible to support a model like following so that
life can be easier for libraries seeking an OO model:

  function MyCustomElement {
    document.initElement(this); // let's the browser do whatever needed
  MyCustomElement.prototype = Object.create(HTMLElement.prototype);

  document.registerElement("my-element", MyCustomElement);

  // or optionally get the tag from MyCustomElement.prototype.
  MyCustomElement.prototype.TAG = "my-element";

With something like this, we would be a lot more flexible at the library
I know this is might be very naive but cannot keep myself from thinking
about it :)

 - Goktug

Received on Wednesday, 8 January 2014 07:37:03 UTC