Web components info

[Mark Giffin <mark@markgiffin.com>]

This went on longer than I thought it would, sorry.

I hope I understood the web components question in the last meeting. I 
understood the question to be "can you make your own element names with 
web components?" And a few people said that they thought that you could 
not make your own new element names.

Based on that question, the answer is yes, you can make your own new 
elements and do things with them. You can insert them into the DOM with 
JavaScript, or you can simply type them into your HTML file.

So right now without using web components capabilities, you can create a 
new element in an HTML file and it won't hurt anything.

<newtag>This is my tag.</newtag>

The browser won't openly reject it even though it's an invalid element, 
and you can style it with CSS and attach JavaScript code to it. But if 
you use the web components Custom Element capabilities, you can do more 
with it. You can add methods and give it its own little API and have it 
do custom things. And there are "lifecycle callbacks" that you can 
define for your elements so that certain things happen when the element 
is created, when it's attached to the DOM, when it's changed, etc. 
There's a new method you use to register your element with the browser:

document.registerElement('my-tag');

The new tag name has to have a hyphen in it. Any element you use without 
registering it (like <newtag> above) will be based on the 
HTMLUnknownElement DOM interface. But if you register it, it's based on 
HTMLElement by default, and you can also base it on other standard HTML 
interfaces like HTMLSpanElement etc.

To add capabilities to an element, you create a JavaScript prototype 
that has those capabilities, and then base the new element on the 
prototype like this:

document.registerElement('my-tag', myProto);

All this requires JavaScript enabled in the browser. This is just the 
Custom Elements spec I'm talking about here. There are three other major 
parts to web components: Shadow DOM, HTML Templates and HTML Imports. 
When these are implemented in browsers, you'll be able to do all kinds 
of cool things.

Web components are still unstable and under heavy development. To use 
them without special helper libraries ("polyfills") you should use 
Google Chrome, Opera, or Firefox with a flag enabled 
(dom.webcomponents.enabled). Custom elements is probably the most stable 
of the four and you can use it by itself.

Google engineers made a web component where you can place a map in your 
HTML just by using this element and its attributes:

<google-maps latitude="-8.034881" longitude="-34.918377"></google-maps>

Below is a cool web components example (only Chrome seems to work). This 
page has lots of custom elements that are based on DocBook elements. 
View source and you can see them. This example uses more than just 
custom elements (it uses the other three specs above also):

http://alexmilowski.github.io/db-component/article.xhtml

The GitHub for this is here is you want to see the code:

https://github.com/alexmilowski/db-component

I still don't have a solid idea how web components could help with DITA 
or Lightweight DITA but I'm thinking about it. Right now web components 
are promoted to web developers as an improved way to create UI widgets 
but you can do a lot more.

Hope this helps and it wasn't too damn long,
Mark