Create your own custom HTML tags/component...TODAY | Hacker News Reader

Create your own custom HTML tags/component...TODAY

github.com

9 pointsdandonkulous2 comments

Q: What if we could easily extend HTML with tags that do more than just tell Google's crawler about the layout of our content?

A: We can, right now, today, on a hell-of-a-lot-of existing browsers and devices: https://github.com/csuwldcat/WebComponents

Open articleView on HN

This is actually pretty useful. Basically, it lets you do something like this:

    document.createElement('slider')

Or just write it in HTML like this:

    <slider></slider>

And as soon as the page is about to render it, the script intercepts it and turns it into something like this (with styles, events, etc):

    <div class="slider"><div class="slider-knob">O</div></div>

You could write a jQuery plugin that does this, however you'd have to initialize it every time you added the element into the page.

Kind of like a DIY shadow DOM: http://glazkov.com/2011/01/14/what-the-heck-is-shadow-dom/

A couple quick, important clarifications:

The parse does not turn the custom tags into divs, there is no need to do that. These are fully capable, valid tags and exist in the source just the way you write them: <moz:sometag></moz:sometag>. Check out the demo linked to in the repo and you'll see ;)

Also, the way the code works is even a bit better than you described in the dynamic creation case. Let's take your example:

    var slider = document.createElement('slider');

you would actually receive a _fully inflated_ element that is already event-bound when it is returned out of document.createElement, pretty sweet right? The innerHTML value of slider would literally read:

    "<moz:sliderknob></moz:sliderknob>"

Reply on news.ycombinator.com