OASIS Mailing List ArchivesView the OASIS mailing list archive below
or browse/search using MarkMail.


Help: OASIS Mailing Lists Help | MarkMail Help

dita-lightweight-dita message

[Date Prev] | [Thread Prev] | [Thread Next] | [Date Next] -- [Date Index] | [Thread Index] | [List Home]

Subject: Web components info

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:


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):


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


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,

[Date Prev] | [Thread Prev] | [Thread Next] | [Date Next] -- [Date Index] | [Thread Index] | [List Home]