The custom html tags should be registered with document.registerElement

[mikebolt]

When I first checked out this project it was news to me that you could have custom html tags without any complaints from the browser. Then I looked it up. The article I found focuses on using document.registerElement. The big advantage to registering these tags is that if we implement the lifecycle callback methods the gCubes will just work automagically. That is, the users won't have to write any javascript code to set up the gcubes, even if they create the gCube dynamically, and we can get rid of setupAllGCubes.

As an example, there would be two ways of changing the highlight to f2l at runtime:

$('#myGCube')[0].ghighlight('f2l');

$('#myGCube').children('g-highlight').remove();
$('#myGCube').append('<g-highlight>f2l</g-highlight>');

Note that by using [0] we're getting a plain HTML element, but it would be extended to have all the gCube functions.

I just ran some tests and it seems that the attributeChangedCallback isn't called when the innerHTML of a custom tag is changed. So either we make all of the g-* tags attributes of the g-cube tag, or we find another way to listen to the innerHTML of the g-cube tag.

Here's the article: http://webcomponents.org/articles/introduction-to-custom-elements/